爲什麼jQuery調整事件觸發兩次？

我只注意到，每當瀏覽器窗口調整大小時，jquery resize事件都會觸發兩次。我無法找到任何文件列出這是默認行爲。我已經在最新版本的Chrome和Firefox中使用jQuery 1.4和1.5測試了這一點。爲什麼jQuery調整事件觸發兩次？

有沒有其他人看到這種行爲？它有一個特定的原因嗎？

更新：如果我單擊瀏覽器窗口上的一次最大化按鈕，就會發生這種情況。我明白，如果我手動將窗口拖動到不同的大小，事件將會被多次觸發，但是最大化按鈕不應該是這種情況。

使用的代碼如下測試。瀏覽器大小的文本輸出兩次：

<!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>

來源

2011-04-04 Mark Brown

直覺，這是真的** **只是一種直覺，是，調整對象同時改變其長度和寬度。 Mayhap的「調整大小」事件觸發了每個軸上的變化？ – tobias86 2011-04-04 06:46:16

我認爲它會在頁面加載時觸發兩次，因爲事件在瀏覽器解析元素之前被實例化。 resize事件在元素創建時觸發。只是一個理論，但可能。你怎麼看？ – www139 2016-05-14 03:34:53

這不是jQuery的問題。這取決於瀏覽器的實現。瀏覽器決定何時觸發「調整大小」。你可以使用window.onresize = function（）{...}來測試。它會一樣。與jQuery無關。我在Win7 chrome上測試過，它被解僱了兩次，而在Win7 opera/safari中，它被解僱了一次。

來源

2011-12-02 11:32:55

我剛剛在Opera 11.52中測試過，並且事件在我的機器上被激發了兩次。 – 2011-12-02 16:26:20

你是如何測試它的？ Mine是Opera 11.52，Win7，我通過切換最大化按鈕來調整窗口的大小。它也只在Safari 5.11中調用過一次。在Mac OS 10中，safari會在點擊最大化按鈕時觸發調整大小事件多次（遠遠超過2次）。這是一個實施問題。瀏覽器決定何時觸發「調整大小」。你可以使用window.onresize = function（）{...}。它是一樣的。與jQuery無關:) – 2011-12-05 12:51:44

JQuery: How to call RESIZE event only once it's FINISHED resizing?

至少顯示其他人有這個問題。在1.3.2它被列爲一個錯誤，因爲事件系統的東西：http://benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html

來源

2011-04-04 03:51:02

-1

我測試了現在的情況，我也接到了兩個電話。所以我想，等...這是一個錯誤，是不是，它是一個前/後聚集函數調用... 我回去JQuery的「文檔調整大小（）：

調整大小處理程序中的代碼不應該依賴處理程序被調用的次數。根據實施情況，調整大小事件可以在調整大小的過程中持續發送（Internet Explorer和基於WebKit的瀏覽器中的典型行爲，如Safari和Chrome），或者只在調整大小操作結束時進行一次一些其他瀏覽器，如Opera）。

還需要其他的詞嗎？

來源

2015-11-08 00:09:45

Thx to Nathan Tuggy，用於糾正拼寫錯誤;） – 2016-01-21 16:43:09

下面是使用setTimeout的問題的簡單解決方案。

jQuery的

var resizeTimeout 
$(window).resize(function(){ 
    clearTimeout(resizeTimeout) 
    resizeTimeout = setTimeout(function(){ 
     console.log("resized") 
    },100) 
});

的JavaScript

var resizeTimeout 
window.addEventListener("resize", function(){ 
    clearTimeout(resizeTimeout) 
    resizeTimeout = setTimeout(function(){ 
     console.log("resized") 
    },100) 
})

來源

2017-08-10 15:26:57

爲什麼jQuery調整事件觸發兩次？

回答

相關問題