Introduction to the use of Vue anti-shake and throttling

concept

1. Anti-shake

Debounce: When the event is triggered, the callback function will be executed after n seconds. If the event is triggered again within n seconds, it will be re-timed.

The advantage is that it can ensure that when the user frequently triggers certain events, the callback will not be frequently executed, and will only be executed once.

The concept of anti-shake: If someone enters the elevator (triggers the event), the elevator will set off after 10 seconds (executes the event listener). At this time, if someone enters the elevator again (triggers the event again within 10 seconds), we have to wait for another 10 seconds before setting off (re-timed).

Application scenarios of anti-shake:

When a user enters a string of characters in the input box, he can use the anti-shake strategy to execute the query request only after the input is completed. This can effectively reduce the number of requests and save request resources.

2. Throttle strategy

Throttle strategy: can reduce the frequency of events triggering over a period of time.

The concept of throttle valve:

Whether the bathroom on the high-speed rail is occupied is controlled by a traffic light. Assuming that it takes five minutes for each person to go to the bathroom, others cannot use it within five minutes. After the previous one is used, set the red light to the green light, indicating that the next person can use it. When the next person uses the bathroom, he needs to first determine whether the control light is green to know whether the bathroom is available.

– The throttle valve is empty, which means that the next operation can be performed, and not empty, which means that the next operation cannot be used.

– After the current operation is completed, the throttle valve must be reset to empty, indicating that the next operation can be performed.

– Before each operation, determine whether the throttle valve is empty

Application scenarios of throttling strategies:

1) When the mouse continuously triggers an event, if clicked, it will only be triggered once within the unit event.

2) When lazy loading, you should listen to the position of the calculation scroll bar, but it is not necessary to trigger every slide. This can reduce the calculation frequency without wasting CPU resources.

Use in Vue

Create a new file in the project

export default {
// Anti-shakedebounce: function (fn, t) {
    let delay = t || 500;
    let timer;
    return function () {
      let th = this;
      let args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        timer = null;
        (th, args);
      }, delay);
    }
  },
  // throttling  throttle: function (fn, t) {
    let last;
    let timer;
    let interval = t || 500;
    return function () {
      let th = this;
      let args = arguments;
      let now = +new Date();
      if (last && now - last < interval) {
        clearTimeout(timer);
        timer = setTimeout(function () {
          last = now;
          (th, args);
        }, interval);
      } else {
        last = now;
        (th, args);
      }
    }
  }
}

document

Introduced

import throttleDebounce from '@/utils/'

// convertRes is a click event bound by el-buttonmethods:{
convertRes: (function() {
      // Events that require throttling, I am using the interface to retrieve it here      ()  
    }, 500),
// throttling eventsconvertResFinal() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
           = true
          const params = {
            arch: ,
            addr: ,
            hexdump: 
          }
          try {
            const res = await getVexConvertRes(params)
            if ( === 200) {
              
            }
          } catch (error) {
          }
        }
      })
    },
}

This is the article about the introduction to the use of Vue anti-shake and throttling. For more related content on Vue anti-shake and throttling, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!