Different implementation of delay execution and immediate execution of anti-shake

1. Application background of anti – shake

   Development scenarios where scrolling events require complex calculations, one-button anti-double-clicking operations, or functions that fire multiple times in a short period of time. If you do complex computations in frequent event callbacks, the page is likely to stall, so consolidate multiple computations into a single calculation and only do it at a precise point.

   If a user triggers the function all the time and the interval between triggering the function is less than T, the function will be invoked only once.

2. Simple anti-shake (delay anti-shake)

   The performance of the delay is: the function is called after the interval T is triggered for the last time, and the code is directly added without further ado:

/** * Simple anti-shake (delay anti-shake) * Applicable scenarios: * 1. Dynamic search in the search box, the interface is called when the search value changes; * @param {function} func * @param {number} wait Wait time * @return {function
function debounce(func, wait = 50) {
    let timer = 0
    return function (. params) {
        timer && clearTimeout(timer)
        timer = setTimeout((a)= > func.apply(this, params), wait)
    }
}
Copy the code

3. Can be configured to perform anti-shake immediately (online information)

   Delay anti-shake can meet the general development needs, but sometimes it is necessary to immediately call the function, the anti-shake event interval does not trigger the demand repeatedly, which needs to be configured to execute the anti-shake immediately, online information has the following implementation (personal feeling is difficult to understand) :

@param {number} wait Specifies the interval between time Windows * @param {Boolean} immediate Whether to call the function immediately * @return {function} returns the client called function */
function debounce(func, wait = 50, immediate = true) {
    let timer, context, args
    // Delay execution of the function
    const later = (a)= > setTimeout((a)= > {
        // Clear the cache timer sequence number when the delay function is completed
        timer = null
        // In the case of delayed execution, the function is executed in the delayed function
        // Use the previously cached parameters and context
        if(! immediate) { func.apply(context, args) context = args =null
        }
    }, wait)

    // The function returned here is the function actually called each time
    return function (. params) {
        // If no deferred execution function is created (later), create one
        if(! timer) { timer = later()// If execute immediately, call the function
            // Otherwise cache parameters and call context
            if (immediate) {
                func.apply(this, params)
            } else {
                context = this
                args = params
            }
            // If the function is already delayed (later), the call clears the original and resets one
            // This will reset the delay function
        } else {
            clearTimeout(timer)
            timer = later()
        }
    }
}
Copy the code

4. Configurable to perform immediate anti-shake (self-fulfilling)

   In view of the Internet can be implemented immediately anti – shake too difficult to understand, as the saying goes do it yourself, I achieve the following:

   function laterDebounce(func, wait = 50) {
       let timer = 0
       return function (. params) {
           timer && clearTimeout(timer)
           timer = setTimeout((a)= > func.apply(this, params), wait)
       }
   }
   
   * @param {function} func * @param {number} wait Wait time * @return {function} return the client call function */
   function immediateDebounce(func, wait = 50) {
       let timer
       let isRepeat = false // Whether to click again
       const later = (a)= > setTimeout((a)= > {
           isRepeat = false // Wait isRepeat=false, timer=null, then call the function
           timer = null
       }, wait)
   
       return function (. params) {
           if(! timer && ! isRepeat) {// isRepeat=false, timer=null, then call the function
               func.apply(this, params)
           } else {
               isRepeat = true
           }
           timer && clearTimeout(timer)
           timer = later()
       }
   }
   
   @param {number} wait Specifies the interval between time Windows * @param {Boolean} immediate Whether to call the function immediately * @return {function} returns the client called function */
   function debounce(func, wait = 50, immediate = true) {
       return immediate ? immediateDebounce(func, wait) : laterDebounce(func, wait)
   }
   Copy the code