使用/切换到时可能会出现此问题jQuery 3
。这是因为所有ready states
在新的jQuery 3
现在已经完全asynchron
。这意味着,代码的执行没有给定的顺序。
正因为如此,才有可能发生这样的情况load
已被触发before your ready state
已被处决。当你的ready
函数现在终于被触发了,你的load
监听器来得太晚,不会被执行。
jQuery 用法:
要改变这种行为,只需删除ready state
在你周围load
事件监听器初始化。不需要用 a 来封装它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);
如果开发人员/用户现在将插件初始化包装在ready state
问题可能会再次发生,就像之前解释的那样:
$(function() {
$("#element").myPlugin();
});
一个解决方案是跟踪load
您自己的插件中的事件,以爆发 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
,你永远不知道你的代码何时/是否被执行......