js节流和防抖的区别

在监听某类事件时，如监听元素滚动或表单input事件时，处理函数在短时间内被频繁调用。
如果处理函数还需要调用后台接口，那么可能上次还没有响应，下一次请求又来了。这样无意中增加了服务器的压力，而且对用户来说，也会造成卡顿，这不是用户和程序员想要的。
节流和防抖大家应该都用过，但一点我不明白，节流和防抖都是延迟执行，那么它们的区别在哪里？

先看看节流的实现

// 节流
var canNext = true;
function throttle () {
    if(!canNext) {
        return;
    }

    canNext = false;
    setTimeout(function () {
        console.log('节流方法执行了')
        canNext = true;
    }, 200)
};

canNext变量作为状态记录者，当它的值为 false 时，表示上一次调用正在执行，直接跳出本次调用，直到上一次的执行完毕，把true 赋给canNext,这时如果有调用，会执行这次调用。

下面我们再看看防抖的实现

// 防抖
var timer = null;
function debounce () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        console.log('防抖方法执行了')
    }, 200)
}

第一次 timer变量保存着这个定时器的标识符（用于关闭当前定时器），如果在200毫秒内调用多次，只会执行最后一次

在以匀速滚动时，两个方法执行结果如图

防抖

节流

大家应该看出区别了，虽然都是延时执行，但两个方法在执行次数上还是有区别。
节流为什么会出现多次执行？我们再看看代码

// 节流
var canNext = true;
    function throttle () {
        if(!canNext) {
            return;
        }

        canNext = false;
        setTimeout(function () {
            console.log('节流方法执行了')
            canNext = true;
        }, 200)
    };

在密集调用时，节流方法相当于每200毫秒执行一次，再看看防抖。

// 防抖
var timer = null;
function debounce () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        console.log('防抖方法执行了')
    }, 200)
}

防抖方法在200以内调用，总是执行最后一次的调用，~~~~这下我总算明白了。

那么它们各自的使用场景有哪些呢？
防抖

• 短信验证码
• 提交表单
• resize 事件
• input 事件（当然也可以用节流，实现实时关键字查找）

节流

• scroll 事件，单位时间后计算一次滚动位置
• input 事件（上面提到过）
• 播放事件，计算进度条

暂时只能想到这些，未尽之处,望大家指正。