节流与防抖

作用

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给 DOM 绑定事件时，有些事件我们是无法控制触发频率的。 如：

• 鼠标移动事件 onmousemove,
• 滚动滚动条事件 onscroll，
• 窗口大小改变事件 onresize，
• 瞬间的操作都会导致这些事件会被高频触发。
• 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。
• 在实时检查输入时，如果我们绑定 onkeyup 事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。

实现方式

节流

• 一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作；鼠标不断点击触发，mousedown(单位时间内只触发一次)…

        function fun(fn,timer){
            var flage = false;
            // event 事件对象
            return function(event){
                if(flage) return;
                flage = true;
                setTimeout(function(){
                    fn(event)
                    flage = false;
                },timer)
            }
        }
        function fn(i){
            console.log(i.target.innerWidth,i.target.innerHeight)
        }
        window.addEventListener('resize',fun(fn,2000))

防抖

• 频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器；search搜索联想，用户在不断输入值时…

        function debounce(fn,timer) {
    var timer=null;
    return function() {
    //保存当前调用的dom对象
     var _this=this;
     //保存事件对象
     var args=arguments;
     clearTimeout(timer)
     timer=setTimeout(function() {
         func.apply(_this,args)
     },wait)
    }

}