如何使用JavaScript onResize受到與延遲或更少的處理密集

我試着如果用戶調整窗口超出斷點閾值來寫，我可以用它來調用基於其他功能或設置CSS/LESS一個JavaScript/jQuery的功能，或如果他們將設備從橫向旋轉到縱向。如何使用JavaScript onResize受到與延遲或更少的處理密集

目前我使用如下：

$(window).on('resize', function() { 
// IF/Switch Case statement, check current width of window is > mobile, or tablet, or desktop 
    // Do stuff depending on which size the window is at currently. 
// End if/Switch case. 
}

但是，這並不理想，因爲它必然會把應變/延遲的用戶體驗，功能，可以從字面上運行的時間負載，同時用戶拖着窗戶越來越小。

取而代之的，是有辦法剛剛火上斷點變化，或者甚至在onResize運行每1或2秒，或者一旦用戶已經停止，也許拖動窗口？

通過這種方式，處理強度將是相當少的。

P.s.當我說斷點時，我的意思是我有移動，BigMobile，平板電腦，視網膜顯示器，平板電腦的寬度設置。

但只是簡單的手機，平板電腦，臺式機可以是妥協了。

我如何可以檢測，而不會造成深加工斷點的onResize改變。任何提示朝哪個方向走？

來源

2014-09-19 redfox05

停止拖動後調整大小http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed和/或使用CSS媒體查詢斷點http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – Spokey 2014-09-19 13:49:15

根據您所使用的圖書館，有可能是節氣門（）或反跳（）功能，這將使這個孩子的戲劇。 – wwwmarty 2014-09-19 13:53:27

謝謝，spokey和烈士，我會看看這些線程和功能 – redfox05 2014-09-19 15:19:27

使用setTimeout和clearTimeout。

var t = null; 

window.onResize(function() { 
    if (t!= null) clearTimeout(t); 

    t = setTimeout(function() { 
     ... 
    }, 500); 
}}

在拖動期間，超時總是被清除並且什麼也沒有發生。但是，當用戶停止拖動時，將運行最後一次setTimeout並執行您的代碼。

來源

2014-09-19 13:49:46

有趣的是，仍然試圖讓我的頭像這是如何工作的，但我會給它一些時間沉沒在 – redfox05 2014-09-19 15:21:19

基本上，當你拖動窗口，超時對象被創建。但是當你繼續拖動窗口時，事件再次被觸發，並且會清除之前創建的超時並創建一個新的超時，所以沒有任何東西被調用（創建，銷燬，創建，銷燬......），但是當你完成拖動時，超時不會再次清除，並且會觸發。 – 2014-09-19 15:47:32

啊，我想我現在還沒回復。你能告訴我，這與Spokey給出的兩個解決方案相比如何？（http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the -resize-is-completed），特別是來自CMS和brahn的答案。不太確定哪個是最好的 – redfox05 2014-09-20 22:09:05

如何使用JavaScript onResize受到與延遲或更少的處理密集

回答

相關問題