resize和scroll事件優化簡單方法

admin發表於2017-03-23

關於這兩個事件這裡就不多介紹了,具體可以參閱以下相關文章:

1.resize事件可以參閱javascript resize 事件一章節。

2.scroll事件可以參閱javascript scroll 事件一章節。 

當調整瀏覽器視窗的時候,會觸發resize事件,這個時候就會重新計算頁面中所有元素的尺寸,這個可視一個非常消耗效能的操作,如果遇到低版本的瀏覽器或者特別差的機器可能會導致卡死的現象,scroll也是同樣的道理,下面就介紹一下如何優化這兩個事件。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var resizeTimer=null; 
$(window).on('resize',function(){ 
  if(resizeTimer){ 
    clearTimeout(resizeTimer) 
  } 
  resizeTimer=setTimeout(function(){ 
    console.log("window resize"); 
  }, 400); 
});

上面程式碼的思路就是設定每隔400毫秒去執行一次事件處理函式中的相關程式碼,在預設條件下可能是極短的時間間隔區執行一次函式的程式碼,程式碼比較簡單這裡就不多介紹了,如有任何問題可以跟帖留言。

相關文章