addLoadEvent方法解析

onload方法在网页加载完毕时,会自动执行,但是该方法有个缺点就是只能执行一个方法。

  onload的限制

  比如下面的代码:

        <script type="text/javascript">
function func1(){
console.log("this is func1()");
}
function func2(){
console.log("this is func2()");
}
window.onload = func1;
window.onload = func2;
</script>

  执行结果如下:

addLoadEvent方法解析

  只有第二个方法被执行。

  那么如何才能在页面加载完成后,执行多个方法呢?

  可以采用addLoadEvent方法,这个方法是由其他人编写的,所以不是DOM里面的方法,如果使用直接复制下面这段代码就可以了!

            function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log("addLoadEvent第一次执行!");
window.onload = func;
}else{
console.log("addLoadEvent多次执行!");
window.onload = function(){
oldonload();
func();
}
}
}

  有了这段代码,就可以给onload绑定多个方法:

            function func1(){
console.log("this is func1()");
}
function func2(){
console.log("this is func2()");
} addLoadEvent(func1);
addLoadEvent(func2);

  原理如同:

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

  下面看一下执行的结果:

addLoadEvent方法解析

  完美达到目的!

  代码解析

  虽然只有几行代码,但是第一次接触的时候,难免晕头转向!

  仔细阅读下面的代码:

            function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log("addLoadEvent第一次执行!");
window.onload = func;
}else{
console.log("addLoadEvent多次执行!");
window.onload = function(){
oldonload();
func();
}
}
}

  这个方法需要一个参数func,就是传入的方法名称。

  当我们使用一次addLoadEvent的时候,就相当于调用window.onload = func1;

  此时window.onload应该是null,因此判断语句typeof window.onload != 'function' 就会返回true.

  执行后,可以看到window.onload方法变成了func1:

addLoadEvent方法解析

  

  再次调用addLoadEvent时,进入else的部分。把func2与原来的oldonload方法一同绑定成新的方法。

  执行后,看到window.onload方法变成如下的样子:

addLoadEvent方法解析

  

  以此类推,当有多个方法时,就会构造出如下的方法:

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

  这样就可以在onload时,绑定多个方法了。

  总结起来,该方法就是把 所有想要在onload时期执行的方法 构造成一个 方法的执行对列 ,然后使用onload执行这个 队列方法

  参考

  【1】addLoadEvent(func)详解:http://www.cnblogs.com/joyan/archive/2010/06/29/1767577.html

  【2】脚本之家addLoadEvent说明:http://www.jb51.net/article/21707.htm

上一篇:浅谈大数据和hadoop家族


下一篇:C#动态调用C++编写的DLL函数