Why does the jQuery resize event fire twice?
Question
I just noticed that the jquery resize event fires twice any time the browser window is resized. I'm unable to find any documentation listing this as the default behavior. I have tested this in the latest versions of Chrome and Firefox, using jQuery 1.4 and 1.5.
Does anyone else see this behavior? Is there a specific reason for it?
Update : This happens if I click the maximize button on the browser window once. I understand that if I'm manually dragging the window to a different size, the event will be fired multiple times, but that shouldn't be the case with the maximize button.
The code used test this is below. The browser resized text is output twice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
$(window).resize(function(){
console.log('Browser Resized');
});
</script>
<body>
</body>
</html>
5 answers
solution1
11 2011-04-04 03:51:02
JQuery: How to call RESIZE event only once it's FINISHED resizing?
Shows at least others are having this issue. In 1.3.2 it was listed as a bug because of something with the events system: http://benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html
solution2
11 ACCPTED 2011-12-02 11:32:55
This is not a problem of jQuery. It depends on the browser implementation. The browser decides when to trigger 'resize'. And you can use window.onresize = function() {...} to test. It will be same. Nothing to do with jQuery. I tested on Win7 chrome, it is fired twice, and in Win7 opera/safari it's fired once.
solution3
3 2017-08-10 15:26:57
Here's a simple solution to the problem using setTimeout .
jQuery
var resizeTimeout
$(window).resize(function(){
clearTimeout(resizeTimeout)
resizeTimeout = setTimeout(function(){
console.log("resized")
},100)
});
JavaScript
let resizeTimeout;
window.addEventListener("resize", () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(console.log, 100, "Resized");
});
solution4
1 2020-02-22 02:20:28
This problem seems not to be tied neither jquery nor browser implementation. In fact if you run the second function which is javascript pure function the glitch occur too. A possible solution is, get out into a separate window the DevTools docker doing so most of the times you will not get double fire the resize event. I though that was because when the window resize, the Devtool docker resize too and triggered the resize event but it is not conclusive apparently. You can try this code without console.log.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
</head>
<style>
body {
height: 1000px;
}
</style>
<script type="text/javascript">
count=0
$(window).resize(function(){
count++
document.body.innerHTML = 'Browser Resized ' + count
//console.log('Browser Resized ' + count);
})
</script>
<!--script type="text/javascript">
count=0
window.addEventListener( 'resize', function(){
count++
document.body.innerHTML = 'Browser Resized ' + count
//console.log('Browser Resized ' + count);
})
</script-->
<body>
</body>
</html>
solution5
-1 2015-11-08 00:09:45
I tested the present case, and I get two calls as well. So I think, etc... is this a bug, is it not, is it a before/after clustered function call... And I go back to JQuery ' documentation for resize() :
Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).
Any other word necessary?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.