問題描述

由于我已經從 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 ...

這篇關于為什么在切換到 jQuery 3 后我的“加載"事件/函數沒有被執行?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！