函数节流-防抖函数

函数节流

一个函数执行一次后，只有大于设定的执行周期才会执行第二次，防止高频率的多次执行

情景：

监听页面滚动时，输出‘我滚动了’，处于优化性能考虑，不希望每次事件触发时就输出，而是在触发的情况下每隔200ms执行一次。

/* 
    节流函数
    @param fn 要被节流的函数
    @param delay 规定的间隔时间
    */
function throttle(fn, delay) {
    var lasttime = 0; //上次执行的时间
    return function () { //此处用闭包，就是为了记录lasttime，lasttime不会马上被销毁，也不会重新被声明赋值
        var nowtime = Date.now();//本次执行的时间
        if (nowtime - lasttime > delay) { //本次减上次时间大于delay时执行fn
            fn.call(this); //修正this指向问题
            lasttime = nowtime; //执行完fn后，重新赋值lasttime
        }
    }
}
// onscroll右边的值必须是个函数，刚好throttle()调用后的返回值是return后的函数
window.onscroll = throttle(function () {
    console.log('我滚动了')
}, 200);

防抖函数

一个需要频繁处罚的函数，在规定的时间内，只让最后一次生效，前面的不生效。

情景：

重复点击某个按钮，最快的二次点击为300ms

function debounce(fn, delay) {
    var timer = null;//记录上次的延时器
    return function () {  //此处用闭包，为了记录timer
        clearTimeout(timer); //清除上次的计时器
        timer = setTimeout(function () { //重新赋值本次得延迟点击
            fn.apply(this);  //执行fn,修正this指向问题
        }, delay);  
    }
}

// onclick右边的值必须是个函数，刚好throttle()调用后的返回值是return后的函数
document.querySelector('#button').onclick = throttle(function(){
    console.log('我点击了')
},1000);

总结

节流函数就是执行第一次，指定时间后才会执行第二次

防抖函数就是在指定时间内，只执行最后一次，缺点就是会被延迟执行

点击按钮发起请求时，特别要注意，防止用户重复点击。

具体用哪个好，视情况而定吧。