浅谈节流和防抖

1.防抖(debounce)

效果：如果短时间内大量触发同一事件，只会执行一次函数。
防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
思路：如果在1000ms内没有再次触发滚动事件，那么就执行函数，如果在1000ms内再次触发滚动事件，那么当前的计时取消，重新开始计时。

function debounce(fn, wait) {
    var timeout = null;      //定义一个定时器
    return function() {
        if(timeout !== null) 
                clearTimeout(timeout);  //清除这个定时器
        timeout = setTimeout(fn, wait);  
    }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

此时会发现，必须在停止滚动1秒以后，才会打印出滚动条位置。

2.节流(throttle)

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。