4

jQuery 1.x/jQuery 2.xからにアップグレードしたためjQuery 3.x、既存のコードが正しく実行されなくなりました。すべて正常に動作しますが、loadイベント リスナーがトリガーされなくなったり、時々トリガーされたりします。

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

1 に答える 1

5

この問題は、 を使用/切り替えたときに発生する可能性がありますjQuery 3。それready statesは、新しいjQuery 3ものすべてが完全にasynchron. つまり、コードの実行順序は決まっていません。

このため、あなたが実行される前にそれloadが引き起こされる可能性があります。関数が最終的にトリガーされると、リスナーは遅すぎて実行されません。ready statereadyload

jQuery の使用法:

この動作を変更するには、イベント リスナーの初期化のready state周りを削除するだけです。これを関数loadでカプセル化する必要はありません。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 プラグイン:

loadもう 1 つのケースは、イベントも使用する jQuery プラグインです。例えば：

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

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

開発者/ユーザーがプラグインの初期化をラップすると、ready state前に説明したように、問題が再び発生する可能性があります。

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

load解決策は、プラグインのイベントを独自に追跡して、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他のユーザーや別のブラウザでこの問題が発生する可能性があるため、テストで を使用する場合は、これらのコードをすぐに変更する必要があります。他の人が問題を抱えている可能性があります。なぜならasynchron、コードがいつ/実行されるかを知ることができないからです...

于 2016-07-26T08:58:32.850 に答える