Preface:

Because the company projects have involved to login and search button these functions, click on the button will trigger the network request, if in a short time, click the button will trigger the multiple network request (for example, some users habitual double click the search button), it is a very cost performance, so I want to make a offer to optimize it. To be honest, I have never done anti-shake by myself in my previous work experience, so THIS time I will do it by myself while learning. This article is to simply record my understanding and use of anti-shake.

Learn about anti-shake and throttling

Anti-shake and throttling are two solutions to problems such as the response not keeping up with the trigger frequency

  • Anti-shaking: Consider a scenario where a button click triggers a web request, but we don’t want to make a web request every time the user clicks the button, we want to make a web request when the user hasn’t clicked the button again for a while, for which we can use anti-shaking.

  • Throttling: Consider a scenario where network requests are made during a scrolling event, but we don’t want the user to make requests all the way through the scrolling, but once in a while, for which we can use throttling.

Throttling is not specific explanation, this article mainly records the anti – shake

Get into the business

Debounce is a universal solution to the problem of shock protection

Mainly around: triggering events, setTimeout, clearTimeout to operate.

Create a function, store the identifier returned by setTimeout for subsequent cleanup, and return a closure function that uses setTimeout internally to call the target function.

2. The effect it achieves is: when the event is triggered rapidly and continuously within a specified period of time, the action will be executed only once. (For example, no matter how many times the event is triggered within 1s, it will only be executed once.)

If you’ve ever used the Debounce function in LoDash, you’ll notice that it has a fairly comprehensive debounce function written inside. Basically, most debounce functions found on the Web have only two parameters. Debounce has three parameters, but in general, two parameters are sufficient, namely a target function to execute and a specified time range. (VOICE: I’m not using Lodash here. If you are interested in loadsh, you can click the link above to see for yourself.)

code

// Declare a debounce function that takes two arguments
const debounce = (func, wait) = > {
    // Declare the timeout variable to be used as a timeout
    let timeout;
    
    // The returned function will be executed multiple times
    // Use the rest argument, which is (... Args) to get any number of arguments we want to pass
    return function executedFunction(. args){
    
      // Clear the last setTimeout
      clearTimeout(timeout);
      
      // The callback function that is executed later
      // The anti-shake time has expired
      const later = () = > {
          // Because we can't get this internally, we use apply
          func.apply(this. args); }// Restart debounce wait time
      timeout = setTimeout(later, wait); }}// page file
// Import the debelas.js file
import debounce from "@/utils/debounce";

// Data search events in methods
searchData: debounce(function () {
      this.getData();
}, 1000),
Copy the code

Parameter Description:

  • Func: Target function to be executed
  • Wait: Time to delay the call, in milliseconds

Well, a simple debounce implements 😊

Closures, REST parameters, and apply() methods are mentioned in the above shake-out functions. For details, please refer to the reference documentation

closure

This thing is brush interview questions don’t know brush to several times, here is not what to do to explained

Rest parameters

Rest parameter ES6 introduces rest parameters (of the form… Variable name), used to get extra arguments to a function so you don’t need to use the arguments object. The rest argument goes with a variable that puts the extra arguments into an array.

Simply put: REST parameter syntax allows us to represent an unquantified parameter as an array

Rest parameters MDN REST parameters in ES6 tutorial by Ruan Yifeng

apply()

The prototype chain for apply() is function.prototype.apply()

The apply() method calls a function with a given this value and arguments in the form of an array (or array-like object)

Grammar: func. Apply (thisArg, [argsArray])

Reference document recommendation: MDN Apply

Ah, I have to go to work and get up early tomorrow, so let’s stop this article tonight. I will check if there is anything that needs to be recorded more carefully when I have time later. If so, I will make adjustments. Thank you for reading 😊