How to prevent high-frequency triggering and high-frequency calling of event functions in JavaScript _ javascript skills

This article mainly introduces how to prevent high-frequency triggering and high-frequency calling of event functions in JavaScript. extracted from JavaScript. If you need JavaScript, you can refer to the following page. The most basic function of JavaScript is to listen to or respond to user actions, which is very useful. Some of your actions are very frequent and some are very rare. Some listener functions are executed lightning-fast, while some heavy listeners will drag the browser to death. Taking the resize event of the browser window for example, this event will be triggered once every scale change in the browser window size. If the listener size is large, your browser will soon be dragged down.

Obviously, we cannot allow the browser to be dragged down, but we cannot delete the listener. However, we can limit the frequency of function calls and weaken the impact of event function operations. Compared with setting the size change of each step of the window to trigger the listener function, we can now set the minimum interval between the listener function triggering to be greater than how many milliseconds, so that it can maintain a reasonable call Channel, ensure that the user experience is not destroyed. There is a good js tool library called Underscore. js, which contains a simple method that allows you to easily create listeners that reduce the trigger frequency of event functions.

JavaScript code

The code of the frequency drop listener is very simple:

The Code is as follows:

// Create a listener
Var updateLayout = _. debounce (function (e ){

// Does all the layout updating here

}, 500); // run once at least 500 milliseconds

// Add the event listener
Window. addEventListener ("resize", updateLayout, false );
... The Underscore. js Code uses interval to check the frequency of event function calls:

// Returns a function, that, as long as it continues to be invoked, will not
// Be triggered. The function will be called after it stops being called
// N milliseconds. If 'immediate' is passed, trigger the function on
// 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 );
};
};

Code is not very complex, but it is also a pleasure to write it by yourself. This debounce function does not depend on other Underscore. js functions. Therefore, you can add this method to your favorite js tool library, such as jQuery or MooTools, Which is easy:

The Code is 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 resize event is the most common place to use the frequency reduction operation, and a common place is to provide an automatic completion prompt based on the user's key input. I like to collect such code snippets, which can easily make your website more efficient. We also recommend that you study Underscore. js, which provides a large number of useful functions.