JS防抖与节流

1. 概念上的区别

1. 防抖：多次执行只有最后一次生效，必要参数 [handle, time]
2. 节流：一段时间内只能执行一次，必要参数 [handle, time]

2. 实现一下

1. 防抖：

    1 function debounce(handle, time) {
    2     let timer = null;
    3     return function () {
    4         if (timer) {
    5             clearTimeout(timer);
    6             timer = null;
    7         }
    8         timer = setTimeout(() => {
    9             handle();
   10         }, time);
   11     };
   12 }

2. 节流：

    1 function throttle(handle, time) {
    2     let timer = null;
    3     return function () {
    4         if (!timer) {
    5             handle();
    6             timer = setTimeout(() => {
    7                 clearTimeout(timer);
    8                 timer = null;
    9             }, time);
   10         }
   11     };
   12 } 

3. 进一步描述下

1. 可以看出来，防抖是每次执行都清除旧的计时器，并且添加新的计时器，所以只有最后一次执行会触发 handle
2. 而节流是计时器时间到了自动清除旧的计时器，然后才在下一次执行中触发 handle 并且添加新的计时器
3. 防抖是不断迭代 handle，自然是最后一个 handle 执行；节流是执行完第一个 handle 后，对后面的 handle 进行了屏蔽。一个是把前面 handle 的替换了，一个是把后面的 handle 屏蔽了。

4. 从事件队列的角度深度分析

1. 防抖是执行了唯一一个被添加到事件队列的 handle，它前面的 handle 随着计时器的移除也都没有进入事件队列，也就不存在进入执行栈了

2. 节流是 handle 在当前执行栈就直接执行了，后面的 handle 直接被屏蔽掉， 一段时间后继续

3. 所以，防抖是在下一次执行栈执行，节流是在当前执行栈执行