Both anti-shake and throttling deal with multiple, frequent triggers, but they are very different.

Anti-shake is to turn multiple triggers into a single trigger, as shown in the blue circle below, ready to go from left to right, and each click of the button will bring it back to the left. We compare the distance from left to right to the time limit wait, so that each time the wait is triggered, the wait will restart as long as the wait has not run out.





Throttling replaces multiple triggers with one at a time interval. The red ball in the picture below will not start from the beginning until the wait time has expired.



For the anti-shake function, we need to set a timer as a benchmark for each trigger.

As shown in the following flow chart, if the timer exists, it indicates that the last wait time has not finished. You need to clear the timer and start the timer again. If the timer does not exist, it will assign a timer to start the timer and determine whether the function should be executed immediately. If yes, the code will be executed to clear the timer. If not, it will start to wait for the end of the wait time. If the wait is not over and the function fires again, it goes back to the function call at the top for another round of judgment.

The throttling function determines whether a wait has been completed during a function call. If so, it executes and if not, it continues to wait.

This article is mainly to help comb out the difference between anti – shake and throttling, as well as the implementation ideas. In the learning process has been see JS | front-end advanced. In order to facilitate reference, the anti-shake function implementation code is attached below.

// This is used to get the current timestamp
function now() {
  return +new Date()}/ * * * image stabilization function, return function calls in a row, idle time must be greater than or equal to wait, * * @param {function} * @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

Throttling function code is also reference JS | front-end advanced, but only took part in order to realize the function. The difference between the current time and the last time a wait was called is used to determine whether the wait has completed:

function throttle (func, wait) {
  var context, args
  // Set the timestamp at which the previous function was fired
  var previous = 0
  // Returns the callback invoked by the user
  return function () {
    var now = new Date().getTime()
    // Enter for the first time
    if(! previous) previous = now// Prepare context and args
    context = this
    args = arguments
    // Calculate the remaining time
    var remaining = wait - (now - previous)
    If now exceeds previous + wait, the function can be executed
    if (remaining <= 0) {
      previous = now
      timeout = null
      result = func.apply(context, args)
      context = args = null}}}Copy the code

I did a little exercise before when I was learning to throttle, and I posted it here. If you are interested, you can see the effect. Just keep clicking the + button.