Throttling function and anti-shaking function are used in many places in daily development. The purpose of both functions is to control the frequency of function being called. Today, we will talk about two functions.

example

Input triggers keyboard input events that send input to the background:

// Define a request function
function request(val) {
    console.log("request: " + val);
}

let inputEl = document.getElementById("input");

inputEl.addEventListener("keyup".function (e) {
    request(e.target.value);
});
Copy the code

It can be seen that every time we press the keyboard to input, we will request, which is a waste of resources. In general applications, we wait for the user to input complete characters, and then request the background, so we use the anti-shake function to optimize this one.

Image stabilization function

When the event is triggered, the function is executed after n seconds. If the event is triggered multiple times within n seconds, the timer restarts

The use of timer to achieve, in n seconds multiple trigger, the first clear timer, new timing

// Define a request function
function request(val) {
    console.log("request: " + val);
}

// Define an anti-shake function
function debounce(fn, delay) {
    let timeout;
    return function(){
      clearTimeout(timeout)
      timeout = setTimeout(() = >{
        fn.apply(this.arguments)
      },delay)
    }
}

let inputEl = document.getElementById("input");

let debounceInput = debounce(request, 500)

inputEl.addEventListener("keyup".function (e) {
    debounceInput(e.target.value);
});
Copy the code

The function is triggered only when the input is complete, preventing the function from being called when the input is constantly, reducing the waste of resources.

Throttling function

A function can be executed only once in a specified unit of time

  1. Timer to achieve

    When a timer is executed, a timer ID is generated. When this ID is present, the function is executed only once per unit of time.

// Define a request function
function request(val) {
    console.log("request: " + val);
}

// Define a throttle function
function throttle(fn, delay) {
    let timer;
    return function(){
      if(! timer) { fn.apply(this.arguments)
        timer = setTimeout(() = >{
          clearTimeout(timer)
          timer = null
        },delay)
      }
    }
}

let inputEl = document.getElementById("input");

let throttleInput = throttle(request, 500)

inputEl.addEventListener("keyup".function (e) {
    throttleInput(e.target.value);
});
Copy the code

As you can see, as we keep typing in the input box, the request function executes the function once in the unit time we specify

conclusion

  1. Both the stabilization function and the throttling function are used to control function call frequency, but their implementation principles are different
  2. The anti-shake function executes the function once after triggering the event in unit time, and does not execute the function for many times within unit time, re-timing
  3. A throttling function is a function that executes only once per unit of time, and is valid only once for multiple triggers

Applicable scenario

  1. Image stabilization
    1. Search input box to search for content, the user in the continuous input, with anti – shake to save the request resources
    2. Resize the window repeatedly, resize the window repeatedly, and use the anti-shake function to do it only once
  2. The throttle
    1. Constant mouse clicks and throttling limit the execution of a function to a specified unit of time
    2. Wheel event, continuously scroll down the wheel, such as scrolling to the bottom to load data