函数的防抖和节流

防抖和节流

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对DOM操作，资源加载等耗费性能的处理，很卡能导致页面卡顿，甚至浏览器崩溃。函数的防抖和节流因此诞生。
防抖
函数防抖就是在函数需要频繁触发的情况时，只有足够的空闲时间，才执行一次、好像公交车司机会等所有人上车了之后再出站一样
运用场景：实时搜素和拖拽

// 函数的防抖
    var oInp = document.getElementById('inp');
    function debonce(handler,delay) { //handler 对哪个函数进行防抖，delay 延迟多少秒执行
        var timer = null;   
        return function () {
            var _self = this,_arg = arguments;
            clearTimeout(timer); // 每次触发时先清除上一次的定时器,然后重新计时
            timer = setTimeout(function () {  // 指定 xx ms 后触发真正想进行的操作 handler
                handler.apply(_self,_arg)
            },delay)
        }
    }
    function ajax(e) {
        console.log(e,this.value)
    }
    oInp.oninput = debonce(ajax,1000)

节流
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像水滴要攒到一定的重量才会落下。
场景：窗口调整（resize），页面滚动（scroll），抢购疯狂点击（mousedown）

    
    
0
    
按钮
    

总结前端函数防抖与函数节流