Home > Web Front-end > JS Tutorial > Solution to window.onresize triggering multiple times_javascript skills

Solution to window.onresize triggering multiple times_javascript skills

WBOY
Release: 2016-05-16 17:16:44
Original
1287 people have browsed it

When I was making an extension before, I needed to ensure that the page displayed normally when changing the window size, so I used window.onresize. However, I found that the status of the page was always wrong after each onresize. Later, I found out that the onresize event was triggered multiple times. , so I collected solutions online and sorted them out.
//
Regarding the number of times the onresize event is triggered, different browsers are different. Safari, opera, and firefox all have one time (only one version was used for testing each, and they are all newer);
//ie6 in It triggers 2 times in quirk and 3 times in standard; ie7 and 8 trigger twice in quirk and standard.

Copy code The code is as follows:

window.onresize = function(){
console .log( 'hello world');
}
It doesn't matter how many times onresize is triggered, the important thing is the solution: when it is triggered multiple times, call the function assigned to onresize once
//
//I don’t know how to translate the word debounce. Brother, I’m not from a major, so I don’t dare to translate it easily, lest I laugh too hard. :)
//
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);
};
}

// Explain that the code was not written by me.
// Code description:
debounce accepts 3 parameters, the last two are optional; the first is the function to debounce, the second represents the time interval of debounce, and the third is at the beginning of the time period or End the execution of the function;
debounce returns the wrapped function. The interval between two executions of the function is at least threshold, and calls that are less than the threshold interval will restart timing (the time interval between two calls);
Put clearTimeout( timeout ) Replace with timer = null; The interval between two executions of the returned function is at least threshold, and calls that are less than the threshold interval will restart timing (the time interval between two calls);
// Solve multiple calls to onresize
Copy code The code is as follows:

window.onresize = debounce( function(){
alert( ' hello world');
}, 100, true)

// Debounce is also used in automatic completion to reduce the number of requests to the server. Only the interval between consecutive keystrokes is greater than a certain value. will send ajax
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template