Example Analysis of Anti-shaking and throttling of JavaScript

This article is to share with you the content of the example analysis of JavaScript anti-shake and throttling. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Anti-shake debounce

Definition: for events that are triggered continuously in a short period of time, such as scrolling events, anti-shaking means that the event handler is executed only once within a certain period of time.

As for anti-shaking, take the finger pressing spring as an example, press the spring with your finger and press it all the time. The spring will not pop up until the finger is released.

For example, resize:

Function debounce (fn, wait) {var timer = null; return () = > {if (timer! = = null) {clearTimeout (timer);} timer = setTimeout (fn, wait);}} function handle () {console.log (Math.random ());} window.addEventListener ("resize", debounce (handle, 1000))

The above is a non-immediate execution version

Immediate execution version

Function debounce (fn, wait) {let timeid, flag = true; return () = > {clearTimeout (timeid); if (flag) {fn (); flag = false } else {timeid = setTimeout (() = > {flag = true;}, wait);}

Drag the browser window to trigger resize, and the handle function is not triggered at this time. If the timer is timed, if resize is triggered again within the timing time, it will be timed again. The advantage of this is that dragging the browser window to trigger resize will not execute the handle function frequently, but only let it run when it needs to be executed, effectively removing redundancy.

Common ways of writing:

Const debounce = (func, delay = 200) = > {let timeout = null return function () {clearTimeout (timeout) timeout = setTimeout (() = > {func.apply (this, arguments)}, delay)}} Throttle throttle

Definition: let the event be executed only once in a certain period of time.

The original intention is that, like the droplets of a faucet, it should be carried out only once in a specified period of time to reduce frequent repeated implementation.

Such as the search box input event.

Calculated by timestamp:

Function throttle (fn,wait) {let startTime = 0; return function () {let endTime = Date.now (); if (endTime-startTime > wait) {fn (); startTime = endTime;}

Through the timer:

Function throttle (fn,wait) {let timeid = null; return function () {if (! timeid) {timeid = setTimeout (function () {fn (); timeid = null;}, wait)} Thank you for reading! This is the end of this article on "example analysis of JavaScript anti-shake and throttling". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!