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

This article will explain in detail the example analysis of JS anti-shake and throttling. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

First, quick recognition and anti-shaking:

Before that, for example, let's define a button and bind a click event to execute the event to be triggered:

/ / get the tag var btn = document.getElementById ("btn"); / / bind event btn.addEventListener ("click", real); / / event function real (e) {console.log ("Northern Lights Night.") ; console.log (e);}

It can be found that clicking all the time will always trigger an event, which is very unfriendly to the server if the event is to send a request. The same request is sent many times because of multiple clicks by the user, and the return result is the same as that of only one click, which greatly increases the pressure on the server and affects the performance. Therefore, we introduce the concept of anti-shake, simply put, anti-shake is through the way of setTimeout, in a certain time interval, multiple triggers into a trigger.

Second, quickly recognize and reduce expenditure:

Throttling is actually easy to understand, reducing the trigger frequency for a period of time. To put it simply, if you keep going crazy, it will be executed at regular intervals. The biggest difference between it and anti-shake is that no matter how often the event is triggered, the function can be executed once within a specified period of time. The following is implemented using a computational timestamp:

Var btn = document.getElementById ("btn"); / / trigger the trigger () function after clicking. The first argument is the actual function to be executed, and the second argument is the limit time btn.addEventListener ("click", trigger (real, 500)); function trigger (fn, delay) {/ / sets the bef to the last execution time, starting with 0 var bef = 0 Return function () {/ / get the current timestamp var now = new Date (). GetTime (); / / execute if (now-bef > delay) {/ / execute function fn (... arguments) if the current time minus the last time is greater than the limit time. / / after execution, the last time is assigned to this execution time bef = now;}};} / / the function function real (e) {console.log ("Northern Lights Night") is actually executed. ; console.log (e);} this is the end of the article on "example analysis of JS anti-shake and throttling". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.