为什么在切换到 jQuery 3 后我的“加载"事件/函数没有被执行?

2022-01-11 00:00:00 jquery jquery-plugins javascript jquery-3

由于我已经从 jQuery 1.x/jQuery 2.x 升级到 jQuery 3.x，我现有的代码不会不再正确执行.一切正常，但 load 事件侦听器不再被触发，或者只是有时:

Since I've upgraded from jQuery 1.x / jQuery 2.x to jQuery 3.x, my existing code will not be executed correctly anymore. Everything works fine, but the load event listener gets not triggered anymore or just sometimes:

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

推荐答案

使用/切换到 jQuery 3 时可能会出现问题.这是因为新的 jQuery 3 中的所有 ready states 现在都是完全的 asynchr.这意味着，您的代码没有给定的执行顺序.

The problem can be occur when using/switching to jQuery 3. It's because all ready states in the new jQuery 3 are now fully asynchron. This means, that there is no given order for your code to be executed.

因此，可能会发生 load 被触发 before 您的 ready state 已被执行.当你的 ready 函数现在终于被触发时，你的 load 监听器为时已晚，不会被执行.

Because of this, it could happen, that load is been triggered before your ready state has been executed. When your ready function now finally gets triggered, your load listener is too late and will not be executed.

jQuery 用法:

要更改此行为，只需删除 load 事件侦听器初始化周围的 ready 状态.不需要用 ready 函数来封装它.你可以不初始化它们.

To change this behavior, just remove the ready state around your load event listener initialization. There is no need to encapsulate this with a ready function. You can initialize them without.

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

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

If you need or want to register both events, you can register the load event by yourself and decide inside the ready state what to do next.

// 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 事件.例如:

Another case would be jQuery plugins, that uses the load event too. For example:

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

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

如果开发人员/用户现在将插件初始化包装在 ready 状态，问题可能会再次发生，就像之前解释的那样:

If a developer/user now wraps the plugin initialization in a ready state the problem could happen again, just like explained before:

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

一种解决方案是自行跟踪插件中的 load 事件，以打破 就绪状态.

A solution would be to track the load event in your plugin on your own, to break out the ready state.

(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);

<小时>

结论:

即使你没有遇到这个问题，在你的测试中，你应该在使用 jQuery 3 时立即更改这些代码，因为其他用户/不同的浏览器可能会遇到这个问题.其他人可能会遇到问题，因为它是异步，你永远无法知道你的代码何时/是否被执行...

Even when this problem not happens to you, in your tests, you should change those code immediately, when using jQuery 3, because other users/different browser can run into this trouble. Others may got the problem, because it is asynchron, you could never know when/if your code gets executed ...

相关文章