Image stabilization

When we bind a button to click events, such as clicking to submit a network request, the user’s click behavior may be triggered continuously, which will lead to continuous submission of network requests, which will cause performance problems, which we do not want to occur. At this point we can use the anti – shake function to solve the problem.

Anti – shake is frequently triggered events within a certain period of time, will only be executed once, triggered again within a certain period of time will be re-timed.

Anti – shake function is divided into non – immediate execution version and immediate execution version.

Not an immediate version

Example code is as follows:

Const debounce = (func, wait = 300) => {const debounce = (func, wait = 300); Return function() {return function() {let context = this; let args = arguments; If (timer) clearTimeout(timer); Timer = setTimeout(() => {func.apply(context, args); }, wait); }}Copy the code

So for the above click event to submit a network request, multiple clicks within 300ms will submit only one network request.

Existing problems

Effect demo code:

const debounce = (func, wait = 300) => { let timer; Return function() {console.log(' clicked '); let context = this; let args = arguments; if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(context, args); }, wait); }} document.querySelector('body').onclick = debounce(function(){console.log(' performed '); }, 1000);Copy the code

Demo Results:

The above code demonstrates that the click event is triggered multiple times within 1000ms, and the target method is executed only 1000ms after the last trigger. There are two problems:

  • If the user keeps clicking, the target method is never executed;
  • If the user only clicks once, it will be in1000msThen the target method is executed;

Immediate release

To solve the two problems above with the non-immediate version, you need to use the immediate version’s anti-shake function.

Example code is as follows:

Const debounce = (func, wait = 300) => {const debounce = (func, wait = 300); Return function() {return function() {let context = this; let args = arguments; If (timer) clearTimeout(timer); // let callNow =! timer; // Set a new timer and delay the execution of the method passed by the user. Timer = setTimeout(() => {timer = null; }, wait); Apply (context, args) if (callNow) func.apply(context, args); }}Copy the code

Effect demo code:

const debounce = (func, wait = 300) => { let timer; Return function() {console.log(' clicked '); let context = this; let args = arguments; if (timer) clearTimeout(timer); let callNow = ! timer; timer = setTimeout(() => { timer = null; }, wait); if (callNow) func.apply(context, args); }} document.querySelector('body').onclick = debounce(function(){console.log(' performed '); }, 1000);Copy the code

Demo Results:

This solves both of the above problems by executing the version immediately.

The throttle

When we bind an event to a scroll or mouse swipe that is very frequently triggered, for example, a network request will be made in the scroll event, but the request will be made in the scroll process, which will cause performance problems and not the desired result. This can be handled using throttling functions.

Throttling is a function in which successive events are executed only once in n seconds.

Throttling is also implemented in two ways: timestamp version and timer version.

The time stamp version

Sample code:

Const throttle = (func, wait = 300) => {// Let lastTime = 0; // let lastTime = 0; Return function() {let context = this; let context = this; let args = arguments; // Let now = +new Date(); If (now - lastTime > wait) {if (now - lastTime > wait) {if (now - lastTime > wait) = now; func.apply(context, args); }}}Copy the code

Effect demo code:

const throttle = (func, wait = 300) => { let lastTime = 0; Return function() {console.log(' mouse moved '); let context = this; let args = arguments; let now = +new Date(); if (now - lastTime > wait) { lastTime = now; func.apply(context, args); }} document.querySelector('body').onMousemove = throttle(function(){console.log(' execute '); }, 500);Copy the code

Demo Results:

Features: A persistent event is executed immediately after it is triggered and then at throttling intervals.

The timer version

Sample code:

Const throttle = (func, wait = 300) => {const throttle = (func, wait = 300); Return function() {let context = this; let context = this; let args = arguments; // Set the timer if (! Timer) {timer = setTimeout(() => {// Clear timer after setting throttling time, execute target method timer = null; func.apply(context, args); }, wait); }}}Copy the code

Effect demo code:

const throttle = (func, wait = 300) => { let timer; Return function() {console.log(' mouse moved '); let context = this; let args = arguments; if (! timer) { timer = setTimeout(() => { timer = null; func.apply(context, args); }, wait); }} document.querySelector('body').onMousemove = throttle(function(){console.log(' execute '); }, 500);Copy the code

Demo Results:

Features: A persistent event is not executed immediately after it is triggered, then executed at throttling intervals, and then executed once at the end.

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event