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. 所以，防抖是在下一次执行栈执行，节流是在当前执行栈执行