jQuery函数在文档就绪时调用了2次

我有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事件。 您将使用此代码获得相同的结果：

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

从doc引用：

由于resize事件可以以高速率触发，因此事件处理程序不应执行计算上昂贵的操作，例如DOM修改。 相反，建议使用requestAnimationFrame，setTimeout或customEvent来限制事件，如下所示：