The most basic function of JavaScript in web pages is to listen or respond to user actions, which is very useful. Some users' actions are very frequent, while others are very rare. Some listener functions are executed like lightning, while some are heavy to drag the browser to death. Take the resize event of the browser window for example. This event will be triggered once in every scale change in the browser window size. If the listener is large, your browser will be dragged down soon.
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 operation. Compared to letting the size change of the window trigger the listener function once, we can now listen to the minimum interval of triggering of the function that must be greater than how many milliseconds, so that it maintains a reasonable call channel and ensures that the user experience does not destroy. There is a good js tool library called Underscore.js, which has a simple method that allows you to easily create listeners that reduce the frequency of event functions triggering.
JavaScript Code
The code for the downswitch listener is simple:
The code copy is as follows:
// Create a listener
var updateLayout = _.debounce(function(e) {
// Does all the layout updating here
}, 500); // Run once every 500 milliseconds at least
// Add the event listener
window.addEventListener("resize", updateLayout, false);
...The underlying layer of this Underscore.js code is actually using 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 for
// N milliseconds. If `immediate` is passed, trigger the 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 complicated, but it is also a kind of happiness to not have to write it yourself. This debounce function does not depend on other Underscore.js functions, so you can add this method to your favorite js tool library, such as jQuery or MooTools, which is easy:
The code copy 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 resize event of the window is the most common place to use frequency down operation. Another common place is that an automatic completion prompt is given based on the user's key input. I really like collecting such code snippets, which can easily make your website more efficient. At the same time, I also recommend that you study Underscore.js, which provides a large number of very useful functions.