JavaScript防抖和节流

防抖

1. 概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会触发。

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

3. 应用：百度搜索框。输入关键词之后会调用接口，获取联想词。但是，频繁调用接口会影响性能，所有此时应使用防抖：只有在用户输入完毕的一小段时间后，才会调用接口，出现联想词。
4. 代码

const debounce = (fn, delay) => {
 let timer = null;
 return (...args) => {
   clearTimeout(timer);
   timer = setTimeout(() => {
     fn.apply(this, args);
   }, delay);
 };
};

节流

1. 概念：指定的时间间隔内只会执行一次任务。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

3. 应用

• 抢购商品。如果不采用节流，那么会有人可以用脚本在很短的时间内触发按钮多次；
• 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取；

4. 代码

const throttle = (fn, delay = 500) => {
 let flag = true;
 return (...args) => {
   if (!flag) return;
   flag = false;
   setTimeout(() => {
     fn.apply(this, args);
     flag = true;
   }, delay);
 };
};

参考链接

• https://www.jianshu.com/p/c8b86b09daf0