Application scenarios of js anti-shake function and function throttling

Anti-shake function

Definition of the anti-shake function: when the event is triggered, the trigger is delayed, and it is triggered only once. If it is triggered again before the trigger, the delay will be refreshed again.

The beauty of the anti-shake function is that after the trigger, it will delay the trigger. If the next trigger is triggered within this delay time, the delay will be reset, which greatly improves the efficiency.

function debounce(callback,time = 300){let t = 0;return function(){clearTimeout(t);t = setTimeOut(callback,time);}}

The anti-shake function is applied to the scroll bar sliding event

Let's first look at when the anti-shake function is not defined - define a scroll bar scroll event - when the mouse slides, determine the distance of the scroll bar from the top, if it is less than a certain value, it will be hidden, if it is greater than a certain value, it will be displayed

 window.onscroll = function(){let num = document.body.scrollTop || document.documentElement.scrollTop;console.log("Call once");if(parseInt(num) > 300){document.getElementById("imgs").style = "display:block";}else{document.getElementById("imgs").style = "display:none";}};

As you can see, the function will be called so many times with a slight mouse swipe.Calling n times, there will be unknown n*n judgments. Obviously, this efficiency is too low.

Look at the use of the anti-shake function again.

 //Anti-shake functionfunction debounce(callback,time=300){let t;return function(){clearTimeout(t);t = setTimeout(callback,time);}}window.onscroll = debounce(returntop,300);//function returntop(){console.log("Call once");let num = document.body.scrollTop || document.documentElement.scrollTop;if(parseInt(num) > 300){document.getElementById("imgs").style = "display:block";}else{document.getElementById("imgs").style = "display:none";}} 

window.onscroll = debounce(returntop,300);

Bind the function debounce(returntop,300) to the mouse scroll event

In the process of code execution, the debounce function will be called once.In this way, the function bound to the mouse scroll event is actually the function returned by the debounce function.

In this way, every time the mouse is slid once, after the time, it will be judged whether the top icon should be hidden or displayed. If it is slid again within the time, the last delay will be cleared, and then come againa new delay.In this way, the efficiency of the code will be greatly improved.

Anti-shake function can also be applied to search boxes (such as Baidu), automatic saving of text editors.The principle is the same as above.

Function throttling

Principle of function throttling: If the time is continuously triggered, it will only be triggered once every period of time, and the continuous trigger in the middle will not be executed.

 function throlle(callback,time=300){let oldtime = new Date().getTime();return function(){let now = new Date().getTime();if(now - oldtime > time){callback();oldtime = now;}}}

Apply to the login button - if the function throttling is not set, when the user clicks to log in continuously, the background will accept n times, so the pressure on the background server will increase greatly.

If the login button click event binding function is throttled,

Example: document.getElementById("").οnclick=throlle(login,5000);

function login(){...}

Bind the throttling function to the login function. The click event binding is actually the function returned by the throlle function. When the code is executed, the thtolle function is called first to obtain a timestamp. If the click event occurs, another timestamp is obtained.If the difference between the two values ​​is greater than the time, the login function will be called. If it is less than the time, the login function will not be executed, thus avoiding the pressure of the user to continuously click to log in to the server.

Function throttling can also be applied to scroll bar listener events.

Difference

Function throttling No matter how frequently the event is triggered, it will ensure that the real event handler will be executed once within the specified event, and the anti-shake function will only trigger the function once after the last event.