为什么切换到jQuery 3后我的'load'事件/函数没有被执行? [英] Why is my 'load' event/function not beeing executed after switching to jQuery 3?
问题描述
因为我已经从 jQuery 1.x
/ jQuery 2.x
升级到 jQuery 3.x
,我的现有代码将不再正确执行。一切正常,但加载
事件监听器不再被触发或仅被触发:
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!");
});
});
推荐答案
使用/切换到<时可能会出现问题code> jQuery 3 。这是因为新的 jQuery 3
中的所有就绪状态
现在完全 asynchron
。这意味着,没有给定代码执行的命令。
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
已在之前触发 就绪状态
已被执行。当你的 ready
函数现在最终被触发时,你的加载
监听器太晚了,不会被执行。
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用法:
要更改此行为,只需删除加载
事件侦听器初始化周围的就绪状态
。无需使用 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!");
});
// });
如果您需要或想要注册这两个事件,可以注册加载
事件由你自己决定并在就绪状态
决定下一步做什么。
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);
如果开发人员/用户现在将插件初始化包装在就绪状态
问题可能再次发生,就像之前解释的那样:
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();
});
解决方案是跟踪加载
插件中的事件,突破 就绪状态
。
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
,因为其他用户/不同的浏览器可能会遇到这种麻烦。其他人可能会遇到问题,因为它是 asynchron
,你永远不知道你的代码何时被执行...
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后我的'load'事件/函数没有被执行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!