為什么 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.