前端复习之路-js的防抖与节流

今天是一个美好的开始

每日一学，作为前端小白的我，励志提升js基础，从今日开始我的前端复习之路。

背景

频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttle（事件节流）和 debounce（事件防抖）出现了。

事件防抖

在高频触发回调函数时，防抖操作使回调函数在一定时间间隔内，再次触发会清空定时器，并重新计时；计时结束后输出一次结果。

事件节流

在高频触发回调函数时，节流操作使回调函数在每隔一段时间定期执行一次，时间间隔内再触发，不会重新执行。

应用场景

• 监听 scroll、mousemove 等事件 - 节流（每隔一秒计算一次位置）
• 监听浏览器窗口 resize 操作 - 防抖（只需计算一次）
• 键盘文本输入的验证 - 防抖（连续输入文字后发送请求进行验证，验证一次就好）
• 提交表单 - 防抖（多次点击变为一次）

共同点

相同点都是需要设置一个回调函数及周期时间，区别在于：

• 防抖是在停止触发后的100ms，执行一次（在此时间段内，只要不停止触发，理论上就永远不会触发回调）

• 节流是在不断的触发过程中，每隔100ms就执行一次。

防抖实现：

function debounce(callback,delay) {
    var timer = null;
    return function () {
        var args = arguments;
        var that = this;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(that, args);
        }, delay);
    };
};

// 使用方式
function dd(){
    console.log('dd');
}
window.onresize = debounce(dd,500);

节流实现：

function throttle(callback,delay){
    var timerId = null;
    return function(){
        if (timerId) {
            return;
        }
        var args = arguments;
        var that = this;
        timerId = setTimeout(() => {
            timerId = null;
            callback.apply(that,args);
        }, delay);
    }
}