当某个函数需要在页面加载完毕时立刻执行,我们可以调用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);即可调用