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

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

来自doc：

的引用

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

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

1 个答案: