js控制运行时间的原生window和jquery写法

最新推荐文章于 2025-01-09 21:00:35 发布

Huijie Xu

最新推荐文章于 2025-01-09 21:00:35 发布

阅读量586

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发基础概念

本文链接：https://blog.youkuaiyun.com/Xu_cipu/article/details/100992340

前端开发基础概念专栏收录该内容

21 篇文章

订阅专栏

本文介绍了JavaScript中控制运行时间的三种函数：window.onload、$(document).ready()和$(window).load()。重点对比了它们的执行顺序和特性，包括window.onload的唯一性与$(window).load()的可重复绑定，以及$(document).ready()的最早执行时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

共有三种控制运行时间的函数：
window.onload (js原生)
$(document).ready() （jquery提供的时间节点一）
$(window).load()（jquery提供的时间节点二）

三者关系：
window.onload 和 $(window).load()指的是同一个时间节点，及页面中图片或其他外部文件都加载完毕之后，进行操作。
而$(document).ready() 的运行时间在这两者之前，DOM树加载完毕就立即执行了

window.onload 和 $(window).load()两者区别：
window.onload只能运行一次，即只能指定一个函数，如果写了多个，前面的会被覆盖掉。而$(window).load()可以运行多次，即可以绑定多个函数
例子：

window.onload = show1;
window.onload = show2; //绑定了两个函数，只有第二个运行，第一个被覆盖
function show1() {
	alert("show1"); //不会运行
}
function show2() {
	alert("show2");
}

然而：

$(window).load(show1);
$(window).load(show2);
function show1() {
	alert("show1");
}
function show2() {
	alert("show2");
}

这样之后，就可以两个函数都运行了，这是window.onload与$(window).load()最重要的区别

$(document).ready()
按照之前说的，$(document).ready()的运行时间早于window.onload和$(window).load()，故，即使下列代码中$(document).ready()处于最末尾，但运行时是第一个运行的，其次是$(window).load()

$(window).load(show1);
$(window).load(show2);
function show1() {
	alert("show1"); //第二个弹框
}
function show2() {
	alert("show2"); //第三个弹框
}
$(document).ready(function(){
	alert("ready"); //第一个弹框
});