八、节流

onscroll是一个高频率的事件，如果将代码直接放入事件中，代码将会被执行很多次，很浪费运算资源。为了避免代码被执行多次，我们定义一个延时器，将要执行的代码放入延时器中，在频繁执行该事件的时候，先清楚之前的延时器，再开启一个新的延时器，从而保证代码只执行一次。

// 获取元素
var $box = $("#box");
// 使用延时器节流
// 定义一个定时器
var timer = null;

// 给document添加scroll事件
document.onscroll = function(){
    console.log(123);
    // 如果页面卷动值大于或等于2000 让box出现
    if (document.documentElement.scrollTop >= 2000){
        // 先清除之前的定时器
        clearTimeout(timer);

        // 赋值定时器
        timer = setTimeout(function(){
            $box.animate({opacity: 1}, 2000, function(){
                console.log("出现了");
            });
        }, 200);
    }
}