JS防抖与节流

  • JS防抖与节流已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

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


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