Shulou(Shulou.com)06/02 Report--

This article mainly shows you "what is the meaning of anti-shaking and throttling in JavaScript". It is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn what "anti-shaking and throttling in JavaScript refers to" this article.

First, function anti-shake (debounce)

1. What is anti-shaking?

Function anti-shake: when an event is triggered frequently, the corresponding callback function will be called after the event is no longer triggered for a certain period of time. If the next event is triggered within the set interval, the timer will be restarted until the event trigger ends.

If you do not continue to trigger the event within the specified time, then call the event handler

As shown in the following example:

/ * define anti-shake function * func: pass in a function that will be called when the event is no longer triggered * delay: define how long to execute the passed callback function * * / function debounce (func,delay) {let timer = null / / to save the timer return function (. Args) {/ / if the timer exists, clear the timer Then reset timer if (timer! = = null) clearTimeout (timer) timer = setTimeout (func, delay) / / when more than delay will call the func here to receive the event, you can modify the this of func to point to because timer has a reference to the outside, so it will not be destroyed} / * event handler * / function testDeBounce () {console.log ('how many times do you think I executed it?') } / / receive the function returned by debounce const temp = debounce (testDeBounce (), 1000) / * bind the event, and test the anti-shake function * / window.addEventListener ('scroll', () = > {temp ()}); / / call the event handler function at least once, and no more than the following window.addEventListener (' scroll', testDeBounce) / / if it is written in this way, the event handler will be called whenever the page scrolls

Sum up the ideas:

1. Define a throttling function

two。 A variable is used inside the function to hold the timer

3. Returns a function that is defined internally: if the timer already exists, clear the timer and reset the timer

4. Define a variable to receive the function returned by debounce

5. Directly call the variable receiving method of the previous step in the callback function of the event

Second, function throttling

Function throttling: under the premise that the event is triggered continuously, the function throttling is guaranteed to be called only once in a certain period of time.

The way of function throttling: timer, timestamp, timer + timestamp

2.1 timer implementation

Train of thought:

1. Define the throttle function throttle

two。 Define timer save timer

3. Returns a function. Internal definition of the function: if the timer does not exist, set the timer and set timer to null after a certain time interval. If the event is triggered again before that, the callback in the timer is invalid.

This is a lonely button.

/ * * define timer throttle function * func: input event handler * delay: timer callback is invalid within the time specified by delay * * / function throttle (func,delay) {let timer = null const context = this return function (... args) {/ / if the timer does not exist if (! timer) {timer = setTimeout (() = > {func.apply (context) Args) / / consider the environment of the returned function call So instead of using this timer = null / / delay directly to clear the timer}, delay)}} function test () {console.log ('aah!') } const temp = throttle (test,1000) document.querySelector ('button') .addEventListener (' click', () = > {temp ()}) 2.2 timestamp implementation

Var throttle = function (func, delay) {var prev = Date.now (); return function () {var context = this; var args = arguments; var now = Date.now () If (now-prev > = delay) {func.apply (context, args); prev = Date.now ();}} function handle () {console.log (Math.random ()) } window.addEventListener ('scroll', throttle (handle, 1000)); 2.3timestamp + timer

/ / Throttle throttle code (timestamp + timer): var throttle = function (func, delay) {var timer = null; var startTime = Date.now (); return function () {var curTime = Date.now (); var remaining = delay-(curTime-startTime); var context = this; var args = arguments ClearTimeout (timer); if (remaining

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.