JS防抖与节流

1. 概念上的区别（从 handle 的有效性分析）

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，它前面的 handle 随着计时器的移除也都没有进入事件队列，也就不存在进入执行栈了

2. 节流是 handle 在当前执行栈就直接执行了

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