Javascript 为什么我的'；加载'；切换到jQuery 3后未执行事件/函数？

由于我已从

jquery1.x

/

jquery2.x

升级到

jquery3.x

，我现有的代码将不再正确执行。一切正常，但不再触发

load

事件侦听器，或者只是偶尔触发：

$(function() {
    $(window).on("load", function() {
        // this line will never/occasionally be executed
        console.log("window is loaded!");
    });
});

---

使用/切换到

jQuery 3

时可能会出现此问题。这是因为新的

jquery3

中的所有

ready状态现在都是完全
asynchron
。这意味着，没有给定的代码执行顺序

因此，在执行
就绪状态之前，可能会触发
加载
。当您的
ready
函数现在终于被触发时，您的
load
侦听器太晚，将不会执行


jQuery用法：

要更改此行为，只需删除
加载
事件侦听器初始化周围的
就绪状态
。不需要用
ready
函数来封装它。您可以在不使用任何参数的情况下初始化它们

// $(function() {
    $(window).on("load", function() {
        // this line will now be executed again
        console.log("window is loaded!");
    });
// });

如果您需要或想要注册这两个事件，您可以自己注册
load
事件，并在
ready state
内决定下一步要做什么

// track the loading state by yourself
var windowLoaded = false;
$(window).on("load", function() {
    windowLoaded = true;
});

$(function() {
    function afterLoad() {
        console.log("loaded");
    }

    // decide inside your ready state what to do
    if( !windowLoaded ) {
        $(window).on("load", afterLoad);
    }
    else {
        afterLoad();
    }
});


jQuery插件：

另一种情况是jQuery插件，它也使用
load
事件。例如：

(function($, window) {
    $.fn.myPlugin = function() {
        $(window).on("load", start);

        function start() {
            console.log("plugin initialized and window loaded");
        }
    };
})(jQuery, window);

如果开发人员/用户现在将插件初始化包装为
就绪状态
，则问题可能再次发生，正如前面所解释的：

$(function() {
    $("#element").myPlugin();
});

一个解决方案是自己跟踪插件中的
加载
事件，以打破
就绪状态

(function($, window) {
    // track the loading state beside the plugin initialization
    var windowLoaded = false;
    $(window).on("load", function() {
        windowLoaded = true;
    });

    $.fn.myPlugin = function() {
        // decide inside your plugin how to start
        if( !windowLoaded ) {
            $(window).on("load", start);
        }
        else {
            start();
        }

        function start() {
            console.log("plugin initialized and window loaded");
        }
    };
})(jQuery, window);


结论：

即使这个问题没有发生在您的测试中，您也应该在使用
jquery3
时立即更改这些代码，因为其他用户/不同的浏览器可能会遇到这个问题。其他人可能会遇到这个问题，因为它是
异步的
，你永远不可能知道你的代码何时/是否被执行…
对不起，我不理解你的评论。你能解释一下你的意思吗@Ceylamumunkucabaş你解释得很好，它是可以理解的，即使我不想理解它-我会的，我知道了？你确定这是jq3中的新功能吗？因为它仍在使用内部就绪延迟对象。您描述的行为可以在jq1.x-2.x中复制。所以，为了更清楚，您能提供一个在jq3.0中失败的旧jq版本中工作的示例吗？关于jq3.x中的这一变化，你有任何链接吗？谢谢编辑：我看到了一些变化，在它使用承诺之前，现在在jq3中，它使用了延迟对象，但我不确定是否有任何更深层次的变化，尽管我真的可以说它是新的。我在GitHub上有一个名为
Lazy
的插件，自从jQuery3推出以来，我就遇到了很多这样的问题，因为我在初始化中使用了
load
。这里有一个悬而未决的问题：。我甚至与jQuery核心团队讨论了这个问题，他们说这是一个“真正的问题”，对于jQuery3来说是一个新问题，因为已经更改了（甚至在发行说明中也提到了）。您可以在此处阅读：。稍后我可以创建一个这样的例子，如果仍然需要…这绝对是好的链接。非常感谢，我很感激！