Window.onresize multiple-trigger solutions _javascript Tips

Source: Internet
Author: User
Tags time interval
Before doing an extension, you need to change the size of the window to ensure that the page display normal, and then used window.onresize but found that every time after onresize the page in the state is always wrong, and then find out the original is the OnResize event triggered several times to find, So the internet to collect the next solution, sorted out.
//
About OnResize event trigger times, different browser different, Safari, opera, Firefox is one (only one version of the test, are newer);
The IE6 is triggered 2 times under Quirk, 3 times under the standard, and ie7,8 two times in quirk and standard.
Copy Code code as follows:

Window.onresize = function () {
Console.log (' Hello World ');
}
How many times onresize triggers is not important, but the solution is to call a function that is set to onresize at a time that is triggered multiple times.
//
Debounce This word does not know how to translate, brother I am not trained, dare not easily translate, lest satisfying smile generous. :)
//
var debounce = function (func, threshold, Execasap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!EXECASAP)
Func.apply (obj, args);
timeout = null;
};
if (timeout)
Cleartimeout (timeout);
else if (EXECASAP)
Func.apply (obj, args);
Timeout = settimeout (delayed, threshold | | 100);
};
}

The description code was not written by me.
Code Description:
Debounce accepts 3 parameters, the latter two are optional; the first is the function to be debounce, the second represents the Debouce interval, and the third executes the function at the beginning or end of the time period.
Debounce returns the wrapped function, which is at least threshold at two execution intervals, and the call that is less than the threshold interval restarts the timing (the interval of two calls);
Change the Cleartimeout (timeout) to timer = null; The return function two execution interval is at least threshold and the call that is less than the threshold interval restarts the timing (the time interval of two invocations);
Resolve OnResize Multiple calls
Copy Code code as follows:

Window.onresize = debounce (function () {
Alert (' Hello World ');
}, True)

In order to reduce the number of requests to the server will also use debounce, only a continuous keystroke interval greater than a certain value will send Ajax

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.