This is the 16th day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

Front-end work will inevitably use anti – shake and throttling, but before always confused the definition of anti – shake and throttling, so today to sort out the difference between anti – shake and throttling, and how to use, when should use anti – shake, when should use throttling.

Problem description

What is front end anti – shake and throttling? What’s the difference? How does it work?

Image stabilization

Concept: The function will be executed only once within n seconds after the high-frequency event is triggered. If the high-frequency event is triggered again within n seconds, the time will be recalculated.

Each time an event is triggered, clear the timer and set a new timer.

Application Scenarios:

  • Input box search lenovo, the user constantly input values trigger input events, with anti – shake to save request resources.
  • Windows triggers resize. Resize the browser window repeatedly to trigger resize. Use stabilization to make it trigger only once

Basic VUE usage:

onDebounce() {
    // Timer is defined globally for this object, and the same timer is called each time onDebounce is executed
    clearTimeout(this.timer); 
    this.timer = setTimeout(() = >{
        this.getAjax(); // The background requests Ajax information
    }, 2000);
},
Copy the code

Basic JS code:

function debounce(fn) {
  let timeout = null; // Create a closure that holds a token to store the return value of the timer
  return function () {
    clearTimeout(timeout); // Remove the previous setTimeout whenever the user enters
    timeout = setTimeout(() = > { // Then create a new setTimeout to ensure that the fn function is not executed if there are any more characters in the interval after the input character
      fn.call(this);
    }, 500);
  };
}

document.getElementById('inp').addEventListener('input', debounce(getAjax)); / / image stabilization
Copy the code

The throttle

Concept: High frequency events fire, but only execute once in n seconds, so throttling dilutes the execution frequency of the function.

Each trigger event determines whether the timer is full. If it is, the timer will be reset. Otherwise, nothing will be done.

Specific idea 1: set a trigger flag flag=true, in the event to determine: if flag==true, a scheduled task, and set flag=false, in the scheduled task to execute the code to obtain Ajax, and set flag=true; If flag=false, return and do nothing until the timer is full.

Specific idea 2: Do not use the timer, directly compare the timestamp difference.

Application Scenarios:

  • Click /mousedown(only triggered once per unit of time)
  • Listen for rolling events, such as whether to slide to the bottom to automatically load more, and throttle

Vue code:

onThrottle() {
    if(!this.throttleFlag) return;
        
    this.throttleFlag = false;
    this.timer = setTimeout(() = >{
        this.getAjax();
        this.throttleFlag = true;
    }, 2000);
}
Copy the code

Thread 1-js code:

function throttle(fn) {
  let canRun = true; // Save a tag through a closure
  return function () {
    if(! canRun)return; // Check whether the flag is true at the beginning of the function, otherwise return
    canRun = false; // Set it to false immediately
    setTimeout(() = > { // Place the execution of an external function in setTimeout
      fn.apply(this.arguments);
      // Finally, set the flag to true after setTimeout (critical) to indicate that the next loop can be executed. The flag is always false when the timer is not executed and is returned at the beginning
      canRun = true;
    }, 500);
  };
}

window.addEventListener('resize', throttle(getAjax));
Copy the code

Vue code:

onThrottle() {
    let now = Date.now();
    if (now - this.lastTime > 5000) { // 5s
        this.getAjax();
        this.lastTime = now; / / update time}}Copy the code

Idea 2-js code:

 function throttle (fn) {
    let lastTime = 0;  // The time of the last trigger
    return function () {
        let now = Date.now();
        if (now - lastTime > 5000) {
           fn.call(this);
           lastTime = now; / / update time}}}Copy the code

Reference links

[1] 7 minutes to understand JS throttling, anti-shake and usage scenarios: _juejin.cn/post/684490… [2] the Daily – Interview – Question: github.com/Advanced-Fr…

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin