This is the first day of my participation in the August Text Challenge.More challenges in August

Implement the debounce function

Principle of the anti-shake function: The callback is executed after the event is triggered for n seconds. If the event is triggered again within n seconds, the timer is reset

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

Consider a scenario where a button click will trigger a network request, but we do not want to initiate a network request every time we click, but when the user clicks the button after a period of time does not click again to initiate a network request, like Baidu search, when I continuously input, will not send a request; I only send a request once if I haven’t entered in a while; If you continue typing less than this time, the time will be recalculated and the request will not be sent. In this case we can use anti-shake.

Handwritten simplified version:

// func is a function that the user passes in to be buffed
// Wait is the time to wait
const debounce = (func, wait = 50) = > {
  // Cache a timer ID
  let timer = 0
  // The function returned here is the anti-shake function that the user actually calls each time
  // Clear the last timer if it has already been set
  // Start a new timer to delay the execution of the user-passed method
  return function(. args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() = > {
      func.apply(this, args)
    }, wait)
  }
}
Copy the code

Applicable scenarios:

Button submission scenario: prevent multiple submission of the button and only perform the last submission of a server verification scenario: form verification requires the cooperation of the server, only perform a sequence of input events for the last time, and search for associative words similar functions

Implement throttle functions

Throttling function principle: specifies that a function can be triggered only once in a unit of time. If more than one function is fired in this unit of time, only one function will take effect

For example :(continuous motion needs to be called, set the time interval), like dom drag, if you use shake elimination, there will be a feeling of stagnation, because only in the stop of the execution of a time, this time should use throttling, in a certain period of time for many times, it will be much smoother

// func is a function that the user passes in to be buffed
// Wait is the time to wait
const throttle = (func, wait = 50) = > {
  // The last time this function was executed
  let lastTime = 0
  return function(. args) {
    // The current time
    let now = +new Date(a)// Compare the current time to the last time the function was executed
    // If the difference is greater than the set wait time, the function is executed
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

setInterval(
  throttle(() = > {
    console.log(1)},500),
  1
)
Copy the code

Applicable scenarios:

  • Drag scenario: Perform this operation only once within a fixed period to prevent uHF position changes
  • Zoom scene: Monitor the browserresize
  • Animated scenes: Avoid performance issues caused by multiple animations in a short period of time