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),