How to write anti shake throttling for small programs?

1. Concept

Function anti shake （debounce）

Function anti shake , It means after triggering the event n Function can only be executed once per second , If in n Seconds to trigger the event , The function execution time is recalculated .

To put it simply , When an action is triggered continuously , Only the last time .

If someone enters the elevator （ Triggering event ）, The elevator will be in 10 Seconds later （ Execute event listener ）, At this time, if someone enters the elevator again （ stay 10 Trigger the event again within seconds ）, We have to wait again 10 Seconds to go （ Retime ）

Function throttling （throttle）

Restrict a function to execute only once in a certain time .

Make sure that if the first person in the elevator comes in ,10 Deliver it on time in seconds , This time starts from the first person on the elevator , Don't wait for , If no one , Does not run

2. Code encapsulation

Function anti shake （debounce）

/** * * @param {*} cb  Callback function  * @param {*} delay  Delay Time  */
const debounce = (cb, delay = 1000) => {
    
  let timer = null;
  return function() {
    
    if (timer) {
    
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
    
      cb.apply(this, arguments);
    }, delay);
  };
};

Function throttling （throttle）

/** * * @param {*} cb  Callback function  * @param {*} wait  Waiting time  */
const throttle = (cb, delay = 1000) => {
    
  // Last execution time 
  let lastTime = 0;
  return function() {
    
    let _this = this;
    let _arguments = arguments;
    let now = new Date().getTime();
    // If the distance from the last execution exceeds delay To execute... Again 
    if (now - lastTime > delay) {
    
      cb.apply(_this, _arguments);
      lastTime = now;
    }
  };
};

3. Use

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";

  //  Throttling use 
  clickHandle: throttle(function(...args) {
    
    console.log("throttle", args);
    console.log("throttle", this);
  }, 2000),

  //  Anti shake use 
  inputHandle: debounce(function(...args) {
    
    console.log("debounce args", args);
    console.log("debounce this", this);
  }, 1000),