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

Source: Internet
Author: User
Tags event listener mootools

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.