Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

  • I believe everyone is familiar with the throttling, simple understanding, can effectively avoid a lot of repetitive (wrong) operation.
  • Anti-shake: If the operation duration is less than the specified time, only the first or last operation is performed. For example, if the command is executed once for 500ms, the indirect time is 100ms, and the total operation duration is 2000ms, the command is executed once.
  • Throttling: Execute once within the specified time. If the operation duration is longer than the specified time, start the next execution. For example, if one operation is performed for 500ms and the total operation duration is 2000ms, the system performs four operations.

The problem

Problem: After clearTimeout(timeout), timeout=?? And what happens to the timer?

Let’s briefly look at the code below, which is plain and simple, but the key is this: timeout && clearTimeout(timeout). Is equal to null? You can see that the timeout value is not null after the timer is cleared, and it remains the same.

  • Next, let’s analyze. We start a timer and assign the timer record to a variable. At this time, the timer is in memory and can be found by the corresponding ID of the variableclearTimeout(timeout)After, just to clear the timer in memory, that is all, did not modify the variable operation;
  • If we go straight to ittimeout=null, and noclearTimeout(timeout)In this case, the timer is still in the memory although there is no variable pointing to it. When the wait time expires, the callback function will be executed.

Anti – shake function implementation

/** * Buffering function: multiple trigger events, event handlers only execute once, and execute after the trigger operation. * Principle: Using the closure principle, the function needs to be used immediately after completion, assigned to a variable, and used by the variable. * @param {*} immediate Specifies whether to execute the callback immediately. */ export const debounce = (callback, wait = 500, immediate = true) => {let timeout = null; let debounced = function() { let self = this; timeout && clearTimeout(timeout); if (immediate) { let callNow = ! timeout; if (callNow) callback.apply(self, arguments); timeout = setTimeout(() => { timeout = null; }, wait); } else { timeout = setTimeout(() => { callback.apply(self, arguments); }, wait); }}; debounced.cancel = function() { clearTimeout(timeout); timeout = null; }; return debounced; };Copy the code

Throttling function implementation

The throttling function is also included

/** * Throttling function: after the operation is triggered, the operation is executed only once in a continuous interval, and the next call will be made after the specified interval. * @param {*} callback * @param {*} wait * @param {*} wait * @param {*} wait * @param {*} wait * @param {*} wait Default 500ms * @param {*} options = {leading: false, // disable the first trailing execution: } * @returns */ export const throttle = (callback, wait = 500, options = {}) => {let time, context, args; let previous = 0; let later = function() { previous = options.leading === false ? 0 : new Date().getTime(); time = null; callback.apply(context, args); if (! time) context = args = null; }; let throttled = function() { let now = new Date().getTime(); if (! previous && options.leading === false) previous = now; let remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (time) { clearTimeout(time); time = null; } previous = now; callback.apply(context, args); if (! time) context = args = null; } else if (! time && options.trailing ! == false) { time = setTimeout(later, remaining); }}; throttled.cancel = function() { clearTimeout(time); time = null; previous = 0; }; return throttled; };Copy the code

Looking forward to

Welcome to comment and like the collection oh ~~~