为什么 jQuery resize 事件会触发两次？
[英]Why does the jQuery resize event fire twice?
问题描述
我只是注意到每次调整浏览器窗口大小时，jquery resize 事件都会触发两次。 我找不到任何将其列为默认行为的文档。 我已经在最新版本的 Chrome 和 Firefox 中使用 jQuery 1.4 和 1.5 对此进行了测试。
有没有其他人看到这种行为？ 有什么具体原因吗？
更新：如果我单击浏览器窗口上的最大化按钮一次，就会发生这种情况。 我知道如果我手动将窗口拖动到不同的大小，该事件将被多次触发，但最大化按钮不应该是这种情况。
用于测试的代码如下。 浏览器调整大小的文本输出两次：
<!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 个解决方案
解决方案1
11 2011-04-04 03:51:02
JQuery：如何仅在完成调整大小后才调用 RESIZE 事件？
表明至少其他人有这个问题。 在 1.3.2 中，由于事件系统的某些原因，它被列为错误： http : //benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html
解决方案2
11 已采纳 2011-12-02 11:32:55
这不是 jQuery 的问题。 这取决于浏览器的实现。 浏览器决定何时触发“调整大小”。 您可以使用 window.onresize = function() {...} 进行测试。 它会一样。 与 jQuery 无关。 我在 Win7 chrome 上进行了测试，它被触发了两次，而在 Win7 Opera/safari 中它被触发了一次。
解决方案3
3 2017-08-10 15:26:57
这是使用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");
});
解决方案4
1 2020-02-22 02:20:28
这个问题似乎与 jquery 和浏览器实现无关。 事实上，如果你运行第二个函数，即 javascript 纯函数，也会出现故障。 一个可能的解决方案是，进入一个单独的窗口，DevTools docker 这样做，大多数时候你不会得到 resize 事件的双重触发。 我认为这是因为当窗口调整大小时，Devtool docker 也会调整大小并触发调整大小事件，但这显然不是决定性的。 您可以在没有 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>
解决方案5
-1 2015-11-08 00:09:45
我测试了目前的情况，我也接到了两个电话。 所以我认为，等等......这是一个错误，是不是，它是一个前/后集群函数调用......我回到 JQuery 的 resize() 文档：
调整大小处理程序中的代码不应依赖于调用处理程序的次数。 根据实现，resize 事件可以在调整大小进行时连续发送（Internet Explorer 和基于 WebKit 的浏览器（如 Safari 和 Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（中的典型行为）其他一些浏览器，例如 Opera）。
还需要什么别的词吗？
Jquery 点击事件触发两次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.