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

This article introduces the relevant knowledge of "how to understand anti-shaking and throttling in javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In javascript, anti-shake means that the function will only be executed once within n seconds after triggering the high-frequency event, and if the high-frequency event is triggered again within n seconds, the time will be recalculated. Throttling means that when the event is triggered continuously, the event handler function is only called once in a certain period of time.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

First, anti-shaking

The function will only be executed once within n seconds after triggering the high frequency event. If the high frequency event is triggered again within n seconds, the time will be recalculated.

Train of thought:

The action binds the event, and the event is triggered after a certain period of time after the action occurs, during which time, if the action occurs again, the event will be triggered again for a certain period of time.

Function debounce (fn) {let timeout = null; / / create a tag to store the return value of the timer return function () {clearTimeout (timeout) / / every time the user inputs, drop the previous setTimeout clear timeout = setTimeout (() = > {/ /) and then create a new setTimeout, which ensures that the fn function fn.apply (this, arguments) will not be executed within the interval interval after the input characters / / if there are any characters entered. / / because the sayHi function runs globally, this points to window / / by default, so use apply to pass the this of inp into}, 500);} function sayHi () {console.log ('anti-shake success');} var inp = document.getElementById ('inp'); inp.addEventListener (' input', debounce (sayHi)); / / anti-shake

For example, if you have a requirement that the user automatically sends an ajax request after entering a string of characters in the input box, if the user does not do anti-dithering, the user will send a request every time the string is changed (delete the character or enter a new character), but if you do anti-dithering, the string will not change after 0.5 seconds after the user enters a character (this is a high probability that the user has completed the string input) If the string is changed within 0.5 seconds (which means that the current string is not the final string to be entered by the user), the request is not sent and continues to be recalculated for 0.5 seconds until the user pauses for more than 0.5 seconds. Then send the request.

II. Throttling

When the event is triggered continuously, make sure that the event handler is called only once in a certain period of time. So throttling will dilute the execution frequency of the function.

Train of thought:

The action binds the event, which is triggered after a period of time after the action occurs, during which time, if the action occurs again, the action is ignored and can not be triggered again until the event is executed.

Function throttle (fn) {let canRun = true; / / Save a tag return function () {if (! canRun) return; / / through the closure to determine whether the tag is true at the beginning of the function, and if it is not true, return canRun = false; / / immediately set to false setTimeout (() = > {/ / put the execution of externally passed functions in setTimeout fn.apply (this, arguments) / / finally, setting the flag to true (key) after the execution of the setTimeout indicates that the next / / loop can be executed. When the timer is not executed, the tag is always false, which is dropped by return at the beginning canRun = true;}, 500);};} function sayHi (e) {console.log (e.target.innerWidth, e.target.innerHeight);} window.addEventListener ('resize', throttle (sayHi)); third, combined with application scenarios

Debounce (anti-shaking)

Search search Lenovo, users continue to enter values, using anti-shake to save requested resources.

When window triggers resize, constantly resizing the browser window will constantly trigger this event, using anti-shake to trigger it only once.

. Throttle (throttling)

Mousedown is triggered by constant mouse clicks (only once per unit time)

Listen for scrolling events, such as whether to slide to the bottom and automatically load more, using throttle to determine

This is the end of the content of "how to understand anti-shaking and throttling in javascript". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.