jQuery函數稱爲2倍文檔準備

Question

我有jQuery代碼：

$(function() { 

    (function checkWidthOnResize() { 
     $(window).on('resize', function() { 
      if($(window).width() < 769){ 
       alert('asdads'); 
      } 
      return false; 
     }); 
    }()); 

    (function checkWidth() { 

     if($(window).width() < 769){ 
      alert('asddsa'); 
     } 
     return false; 
    }()); 

}); 

當頁面已經準備好，我嘗試調整769px下的畫面，我的第一個功能checkWidthOnResize()被加載兩次。換句話說，我一個接一個地收到2條警報消息。

我想了解爲什麼會發生這種情況，並知道如何防止它？

Answer 1

該問題與jQuery無關。這取決於瀏覽器何時調用window.onresize事件。從doc

$(function() { 
    window.onresize = function() { 
     if($(window).width() < 769) { 
      alert('asdads'); 
     } 
    }; 
}); 

報價：你會得到相同的結果與此代碼

由於調整大小事件可以觸發以高速率，事件處理 不應該執行計算昂貴的操作，如DOM 修改。相反，建議使用 requestAnimationFrame，setTimeout或customEvent來限制事件，如下所示：