This is the 15th day of my participation in Gwen Challenge

Written in the preface

In the process of writing a page, we often need to monitor the behavior of the page, such as scrolling, keyboard input, mouse movement and so on. These JS provide events for us to call, such as onScroll, onInput, onMousemove. But the browser is sensitive enough to trigger these events. For example, if you scroll 50px, you will have triggered a dozen or more events, which will greatly affect browser performance and, if it involves background interfaces, will crash the server.

How can you avoid this behavior?

This is where the anti-shake function and throttling function come in handy.

Anti-shock function (Debounce)

Set an interval. If the interval between two events is greater than the specified interval, the corresponding function will be executed; otherwise, the function will not be executed.

For example, if you have a scroll event, set the interval to 100ms. If you keep scrolling, I will not execute the function for the scroll event all the time. I will only execute the function after you have stopped for 100ms. If you stop, but you scroll again within 100ms, it will not be executed.

It depends on the frequency at which the event is triggered. If the frequency interval exceeds the set interval, it will be executed, otherwise it will not.

So how does that code work? The setTimeout and clearTimeout functions are used

// The buffeting function
function debounce(fn, delay = 100) {
  let timer = null
  return function (. args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() = >{ fn(... args) }, delay) } }// Listen for scroll events
window.addEventListener('scroll', debounce(function () {
  console.log('Scroll event triggered')}))Copy the code

Two parameters are supported, one is the function corresponding to the event, and the other is the set time interval, in ms.

Principle analysis: Set setTimeout at the beginning. If the time interval of the next event is triggered within the set delay, clearTimeout will be set, and then setTimeout will be reset until the time interval exceeds the set delay, and so on.

Throttle functions

Set a time interval, such as 1000ms, at which the function will only be executed once, no matter how many events are triggered.

So how does that code work? Similar to the anti-shake function, setTimeout and clearTimeout functions are mainly used, but clearTimeout is placed in different positions.

function throttle(fn, delay = 1000) {
  let timer
  return function (. args) {
    if (timer) return
    timer = setTimeout(() = > {
      clearTimeout(timer)
      // Destroy timer after clearTimeout
      timer = nullfn(... args) }, delay) } }// Listen for scroll events
window.addEventListener('scroll', throttle(function () {
  console.log('Scroll event triggered')}))Copy the code

Two parameters are supported, one is the function corresponding to the event, and the other is the set time interval, in ms.

If setTimeout is not executed, it will return next time. The next setTimeout is not set until the setTimeout function is executed, and so on. This ensures that it will only be executed once in the set interval.

The difference between

The stabilization function is related to the frequency of the trigger event, as long as the trigger time interval exceeds the set interval, then the function will execute, otherwise it will not. The throttling function is time-dependent and only executes the function once within a set interval.

Application scenarios

Application scenarios are very flexible, and there is no limit to which scenarios must use which functions.

For example, a scroll event, I think if you want to do a scroll event after the scroll has stopped, then you can use an anti-shake function; If I feel that I want to perform a scroll event every 1s, then I can use the throttling function.

Once you understand the two functions, combine them with product requirements and decide which one to use.

conclusion

Above is my summary of the anti – shake function and throttling function, I hope to help you understand the anti – shake function and throttling function