如何避免由其他事件觸發的多次觸發的窗口大小調整

我發現在我的頁面中調整大小的代碼在設備中的方向更改期間觸發多次。懷疑這是由於其他事件，如在頁面模式中發生頁面滾動發生從景觀變爲人像，反之亦然。我需要在窗口大小調整中編寫邏輯，但不止一次調用它。有沒有什麼辦法可以避免其他事件影響窗口大小調整如何避免由其他事件觸發的多次觸發的窗口大小調整

來源

2016-01-21 Sumanth madey

因爲如果出於調試目的，你解除了任何其他事件，那麼調整大小隻會被觸發一次？！...？ –

請注意，調整大小事件會針對窗口大小更改的每個*像素*引發一次。 –

http://stackoverflow.com/questions/16595864/fire-resize-event-once-on-size-down-and-once-on-size-up/16596023#16596023 – SpYk3HH

窗口大小調整事件在每個窗口調整大小過程中會多次觸發。正如Rory McCrossan在上面指出的那樣，事件每發生一次像素變化都會觸發一次。

一種選擇是使用一個debounce功能，如由David沃爾什描述：

https://davidwalsh.name/javascript-debounce-function

下面是另一種有用的文章中，描述節流和去抖動之間的差：

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

最後，您可以使用不太優雅（但同樣有效）的方法來使用全局變量來跟蹤您希望何時允許調整事件觸發。

var ok_to_resize=true; 
$(function(){ 
    $(window).resize(function(){ 
     if (ok_to_resize){ 
      //run your resize code 
      ok_to_resize = false; 
      setTimeout(function(){ 
       ok_to_resize = true; 
      },500); 
     } 
    }); //END window.resize 
}); //END document.ready

來源

2016-01-21 18:17:05 gibberish

'debounce'和你最後一個例子幾乎是一樣的。他們只是將它包裝得整潔一些，並使用元素自己的屬性而不是全局變量。 – SpYk3HH

如何避免由其他事件觸發的多次觸發的窗口大小調整

回答

相關問題