正文

js 防抖与节流

IP云
IP云V管理员/4 阅读
11/12
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 概念上的区别（从 handle 的有效性分析）2. 实现一下

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 }
  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 }
  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 }