The way to prevent high frequency triggering and high-frequency invocation of event functions in JavaScript _javascript tips

The most basic function of JavaScript in a Web page is to listen to or respond to a user's actions, which is very useful. The user's action some very high frequency, some very rare. Some listener functions execute like lightning, and some heavy drag will kill the browser. In the case of the Resize event in the browser window, this event triggers once for each scale change in the browser window size, and if the listener volume is large, your browser will soon be worn down.

Obviously, we can't allow the browser to be dragged down, but we can't delete the listener. However, we can limit the frequency of function calls and weaken the effect of the event function. Instead of triggering a listener function to change the size of each step of the window, we can now listen to the minimum interval at which the function is triggered must be greater than how many milliseconds, so that it maintains a reasonable call channel, ensuring that the user experience is not destroyed. There is a good JS tool library called Underscore.js, which has an easy way to create a listener that reduces the frequency of event function triggers.

JavaScript code

The code for a frequency-reducing listener is simple:

Copy Code code as follows:

Creating listeners
var updatelayout = _.debounce (function (e) {

Does all of the layout updating here

}, 500); Minimum 500 milliseconds to run once

ADD the event Listener
Window.addeventlistener ("Resize", Updatelayout, false);
... The bottom layer of this underscore.js code is actually to check the frequency of event function calls with interval:

Returns a function, that, as long as it continues to is invoked, won't
Be triggered. The function is called after it stops being called for
N milliseconds. If ' immediate ' is passed, Trigger's function on the
Leading edge, instead of the trailing.
_.debounce = function (func, wait, immediate) {
var timeout;
return function () {
var context = This, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply (context, args);
};
var callnow = immediate &&!timeout;
Cleartimeout (timeout);
Timeout = settimeout (later, wait);
if (Callnow) func.apply (context, args);
};
};

The code is not particularly complex, but it is also a blessing not to write on your own. This debounce function does not depend on other underscore.js functions, so you can add this method to your favorite JS ToolPak, such as jquery or MooTools, easily:

Copy Code code as follows:

MooTools
Function.implement ({
Debounce:function (Wait, immediate) {
var timeout,
func = this;
return function () {
var context = This, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply (context, args);
};
var callnow = immediate &&!timeout;
Cleartimeout (timeout);
Timeout = settimeout (later, wait);
if (Callnow) func.apply (context, args);
};
}
});

Use it!
Window.addevent ("Resize", Myfn.debounce (500));

As mentioned above, the window's Resize event is the most common place to use frequency reduction operations, there is a common place, according to the user's key input to give automatic completion prompts. I like to collect code snippets that make your site more efficient. It is also recommended that you study underscore.js, which provides a number of very useful functions.