小程序的防抖节流怎么写？

原创

已于 2022-06-27 10:11:19 修改 · 912 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #前端

于 2022-06-24 16:54:18 首次发布

本文详细介绍了JavaScript中的函数防抖（debounce）和函数节流（throttle）的概念，提供了相应的代码封装示例，并展示了在实际应用场景中如何使用这两种优化技巧，如输入框输入监听和按钮点击事件处理。通过防抖和节流，可以有效地提高性能，避免频繁调用函数导致的资源浪费。

防抖节流

1.概念
- 函数防抖（debounce）
- 函数节流（throttle）
2. 代码封装
- 函数防抖（debounce）
- 函数节流（throttle）
3. 使用

1.概念

函数防抖（debounce）

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

简单的说，当一个动作连续触发，则只执行最后一次。

如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）

函数节流（throttle）

限制一个函数在一定时间内只能执行一次。

保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行

2. 代码封装

函数防抖（debounce）

/**
 *
 * @param {*} cb 回调函数
 * @param {*} delay 延时时间
 */
const debounce = (cb, delay = 1000) => {
   
   
  let timer = null;
  return function() {
   
   
    if (timer) {
   
   
      clearTimeout(timer);
    }
    timer = setTimeout(() => {