preface

In the development process, we always encapsulate some public functions as our tools to simplify code or reuse code. For this purpose, I intend to sort out some encapsulated tool functions commonly used in my daily work. This article is related to the encapsulation of anti-shake function

series

1. Deep and light copy of front-end toolkit

2. Date formatting of the front-end toolkit

3. Anti-shake function of front-end kit

4. Front-end kit widgets

5. Front-end toolkit log beautification

background

We often encounter a requirement in our daily development, such as the need to do a complex calculation in a scrolling event or to implement a button against second clicks.

These requirements can be achieved through function jitter prevention. The first requirement, in particular, is that if you do complex calculations during frequent event callbacks, the page is likely to stall. It is better to combine multiple calculations into a single calculation and only do operations at a precise point.

Analysis of the

PS: The purpose of both anti-shake and throttling is to prevent multiple calls to the function. The difference is that, if a user fires the function all the time, at intervals shorter than wait, the function will be called once in the case of stabilization, whereas the function will be called at intervals (wait) in the case of throttling.

Anti-jitter and throttling are different in nature. Anti-jitter means to turn multiple executions into the last one, and throttling means to turn multiple executions into periodic executions.

Understand the realization of anti – shake:

// func is the function that the user passes in to be buffedwaitConst debounce = (func,wait// Cache a timer IDletTimer = 0 // The function returned here is the anti-shake function actually called by the user // Empty the last timer if the timer has been set // Start a new timer, delay the execution of the method passed in by the userreturn function(... args) {if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)}}Copy the code

It is not hard to see that if the interval between calls is less than wait, the last time is cleared before the last time is up, so the function is not executed

Tool encapsulation

/** * Buffeting function, return function continuous calls, idle time must be greater than or equal towait* * @param {function} @param {number}wait* @param {Boolean} immediate Specifies whether to call the function * @ if the parameter is set to truereturn {function} returns the client-calling function */function debounce(func, wait = 50, immediate = true) {
  letTimer, context, args // Delay function const later = () =>setTimeout(() => {// After the delay function is executed, the number of the timer for clearing the cache is null. // If the delay function is executed, the function is executed in the delay function. // The cached parameters and context are usedif(! immediate) { func.apply(context, args) context = args = null } },wait) // The function returned here is the function actually called each timereturn function(... Params) {// Create a delayed execution function (later) if not already createdif(! Timer) {timer = later() // If it is executed immediately, call the function // otherwise cache parameters and call contextif (immediate) {
        func.apply(this, params)
      } else{context = this args = params} // If there is already a delay function (later), when called, clear the original and reset one // so that the delay function will be reset}else {
      clearTimeout(timer)
      timer = later()
    }
  }
}
Copy the code

As for the throttling function, you can implement it by yourself.

---

Open source library

Personal home page | bin – UI | bin – admin