js防抖与节流

1.节流（throttle）

定义：先定义个执行周期，当时间执行时间大于等于执行周期，那就进入新的周期；如果小于执行周期就等事件执行结束后执行回调

案例：throttle 就好比将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出；

function throttle(fn, gapTime) { //节流
     let _lastTime = null;

     return function () {
     let _nowTime = + new Date()
     if (_nowTime - _lastTime > gapTime || !_lastTime) {
        fn();
       _lastTime = _nowTime
     }
    }
};
//resize测试
function task() {
      console.log(window.document.body.clientWidth)
}
window.addEventListener('resize',debounce(task,200),false)

2.防抖（debounce）

定义：防抖就是一个事件完成后n毫秒之后再执行回调，如果这n毫秒内又重复一次事件，就重新计算时间；

举例：debounce你在进入电梯后发现这时不远处走来了了一个人，等 10 秒钟，这个人进电梯后不远处又有个妹纸姗姗来迟，怎么办，再等 10 秒，于是妹纸上电梯时又来了一对好基友...，作为感动中国好码农，你要每进一个人就等 10 秒，直到没有人进来，10 秒超时，电梯开动。

        function debounce(fn, wait) { //防抖
            var timer = null;
            return function () {
                var context = this
                var args = arguments
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                timer = setTimeout(function () {
                    fn.apply(context, args)
                }, wait)
            }
        };
      //resize测试
        function task() {
            console.log(window.document.body.clientWidth)
        }
        window.addEventListener('resize',debounce(task,200),false)

总结

throttle 可以想象成阀门一样定时打开来调节流量，它适合指定每隔一定时间间隔内执行不超过一次的情况；
例如 拖动滚动条（scroll）,resize，移动鼠标的事件处理等

debounce 可以想象成把很多事件压缩组合成了一个事件，它适合只执行一次的情况；
例如 搜索框中的自动完成。在停止输入后提交一次 ajax 请求;keyup事件等