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来限制事件，如下所示：