javascript 为什么 jQuery resize 事件会触发两次？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5534363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does the jQuery resize event fire twice?
提问by Mark Brown
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.
我只是注意到每次调整浏览器窗口大小时，jquery resize 事件都会触发两次。我找不到任何将其列为默认行为的文档。我已经在最新版本的 Chrome 和 Firefox 中使用 jQuery 1.4 和 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>
采纳答案by h--n
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.
这不是 jQuery 的问题。这取决于浏览器的实现。浏览器决定何时触发“调整大小”。您可以使用 window.onresize = function() {...} 进行测试。它会一样。与 jQuery 无关。我在 Win7 chrome 上测试过，它被触发了两次，而在 Win7 Opera/safari 中它被触发了一次。
回答by jn_pdx
JQuery: How to call RESIZE event only once it's FINISHED resizing?
JQuery：如何仅在完成调整大小后才调用 RESIZE 事件？
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
表明至少其他人有这个问题。在 1.3.2 中，由于事件系统的某些原因，它被列为错误：http: //benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html
回答by Etienne Martin
Here's a simple solution to the problem using setTimeout.
这是使用setTimeout.
jQuery
jQuery
var resizeTimeout
$(window).resize(function(){
clearTimeout(resizeTimeout)
resizeTimeout = setTimeout(function(){
console.log("resized")
},100)
});
JavaScript
JavaScript
let resizeTimeout;
window.addEventListener("resize", () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(console.log, 100, "Resized");
});
回答by Hender
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.
这个问题似乎与 jquery 和浏览器实现无关。事实上，如果您运行第二个函数，即 javascript 纯函数，也会出现故障。一个可能的解决方案是，进入一个单独的窗口，DevTools docker 这样做，大多数时候你不会得到 resize 事件的双重触发。我认为这是因为当窗口调整大小时，Devtool 泊坞窗也会调整大小并触发调整大小事件，但这显然不是决定性的。您可以在没有 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>
回答by Jean-Baptiste Lasselle
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() :
我测试了当前案例，我也接到了两个电话。所以我认为，等等......这是一个错误，是不是，它是一个前/后集群函数调用......我回到 JQuery 的 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).
调整大小处理程序中的代码不应依赖于调用处理程序的次数。根据实现，resize 事件可以在调整大小进行时连续发送（Internet Explorer 和基于 WebKit 的浏览器（如 Safari 和 Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（在其他一些浏览器，例如 Opera）。
Any other word necessary?
还需要什么词吗？
