addLoadEvent事件 —— 详解

最新推荐文章于 2020-04-08 13:13:00 发布

原创最新推荐文章于 2020-04-08 13:13:00 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#addLoadEvent #页面加载完成同时执行多个函数

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在网页加载完毕后执行多个函数的方法。通过使用addLoadEvent函数，可以确保无论有多少个函数，都能在页面加载完成后按需执行。这种方法避免了直接使用window.onload事件的限制，提供了更灵活的解决方案。

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

当某个函数需要在页面加载完毕时立刻执行，我们可以调用window对象的的onload事件，代码如下：

window.onload=func1;

但如果我们有多个函数需要在页面加载完毕时立刻执行呢？我们可以这样子写吗？

window.onload=func1;
window.onload=func2;

显然是不可以的，通过执行函数可以发现，只有func2在页面加载完毕时执行了。
那我们有别的方法能让func1和func2同时执行吗？当然有啦，我们可以这样创建一个匿名函数，让它绑定在onload事件上，同时执行func1和func2，代码如下：

window.onload=function(){
	func1();
	func2();
}

这样就可以实现func1和func2在页面加载完成时同时执行了，但是，这不是最理想的做法，最理想的做法是，编写一个addLoadEvent函数来处理这个问题，代码如下：

function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof window.onload!='function'){
		window.onload=func;
	}else{
		window.onload=function(){
			oldonload();
			func();
		}	
	}
}

function addLoadEvent(func){
首先创建一个addLoadEvent函数，传入一个参数func，func就是我们想调用函数的

var oldοnlοad=window.onload;
定义一个oldonload变量来存放window.onload，如果window.onload调用过了第一个函数func1，那么就把window.οnlοad=func1()，再把func1()赋给oldonload

if(typeof window.onload!=‘function’){
这一步是判断window.onload是否调用过函数

如果没有调用过，typeof window.οnlοad=null，不相等就返回true，执行window.οnlοad=func;也就是第一次调用你的func1函数，即window.οnlοad=func1;

如果调用过，就返回false，执行匿名函数window.οnlοad=function(){oldonload();func();}
因为window.onload调用过，证明此时window.οnlοad=func1，即oldοnlοad=func1；执行oldonload()相当于执行func1()，接着执行func();此时的func()即你传进来的第二个函数，即func2();执行func2();

至此，func1和func2都执行了一遍

可以编写一个网页试试代码，如下
index.html 代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script src="addLoadEvent.js"></script>
</body>
</html>

addLoadEvent.js 代码如下：

// JavaScript Document
function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof window.onload!='function'){
		window.onload=func;
	}else{
		window.onload=function(){
			oldonload();
			func();
		}	
	}
}
function func1(){console.log('这是func1');}
function func2(){console.log('这是func2');}
function func3(){console.log('这是func3');}
function func4(){console.log('这是func4');}
addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);
addLoadEvent(func4);

到浏览器的控制台可以看到输出内容：
这是func1
这是func2
这是func3
这是func4

addLoadEvent函数可以解决网页加载完毕需要同时执行多个函数的问题，无论需要同时加载多少个函数，只需要加入一条语句addLoadEvent(functionName);即可调用