Window is used. onresize, but it is found that the status on the page is always incorrect after each onresize event. Let's share with you the solution to the onresize event multiple times before doing an extension, you must ensure that the page is displayed normally when changing the window size, so the window is used. onresize found that the status on the page is always incorrect after each onresize event. Later, it was found that the onresize event triggered multiple searches, So I collected a solution on the Internet and sorted it out.
//
The number of onresize event triggers varies with different browsers. safari, opera, and firefox are all one time (only one version is used for testing, and both are newer );
// Ie6 is triggered twice under quirk, and the standard is triggered three times. ie7 and 8 are both triggered twice in quirk and standard.
The Code is as follows:
Window. onresize = function (){
Console. log ('Hello World ');
}
Onresize does not matter how many times it is triggered. The most important solution is to call the onresize function once when multiple times are triggered.
//
// The Word "debounce" does not know how to translate it. I am a non-specialist and dare not translate it easily, so that I can not smile generously. :)
//
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 code is not written by me.
// Code Description:
Debounce accepts three parameters, and the last two are optional. The first parameter is the debounce function, the second parameter is the debouce interval, and the third parameter is the end of the execution function at the beginning of the time period;
Debounce returns the packaged function. The interval between two calls of this function is at least threshold, and the calls smaller than the threshold Interval start timing again (the interval between the two calls );
Replace clearTimeout (timeout) with timer = null. The returned function has at least two execution intervals of threshold, and CALLS smaller than threshold will start timing again (the interval of two calls );
// Solve multiple onresize calls
The Code is as follows:
Window. onresize = debounce (function (){
Alert ('Hello World ');
}, 100, true)
// In auto-completion, debounce is also used to reduce the number of requests to the server. ajax is sent only when the consecutive key-breaking interval is greater than a certain value.
