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

Dark_programmer

已于 2022-06-27 10:11:19 修改

阅读量830

点赞数

分类专栏：小程序 js 文章标签：小程序 javascript 前端

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

本文链接：https://blog.csdn.net/Dark_programmer/article/details/125448655

版权

js 同时被 2 个专栏收录

48 篇文章

订阅专栏

小程序

19 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(() => {
      cb.apply(this, arguments);
    }, delay);
  };
};

函数节流（throttle）

/**
 *
 * @param {*} cb 回调函数
 * @param {*} wait 等待时间
 */
const throttle = (cb, delay = 1000) => {
  //距离上一次的执行时间
  let lastTime = 0;
  return function() {
    let _this = this;
    let _arguments = arguments;
    let now = new Date().getTime();
    //如果距离上一次执行超过了delay才能再次执行
    if (now - lastTime > delay) {
      cb.apply(_this, _arguments);
      lastTime = now;
    }
  };
};

3. 使用

mine.axml

<view class="root_container">
  
  <input placeholder="Input" onInput="inputHandle" />

  <button size="default" type="primary" catchTap='clickHandle'>Button</button>
</view>

mine.js

import { debounce, throttle } from "/utils/index.js";

  // 节流使用
  clickHandle: throttle(function(...args) {
    console.log("throttle", args);
    console.log("throttle", this);
  }, 2000),

  // 防抖使用
  inputHandle: debounce(function(...args) {
    console.log("debounce args", args);
    console.log("debounce this", this);
  }, 1000),