addLoadEvent analytical method

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

onload method when the page is loaded, it will automatically execute, but this method has a drawback that can only execute a method .

　　onload restrictions

　　For example the following code:

<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>

　　Execution results are as follows:

　　Only the second method is executed.

 

　　So how can after the page load is complete, execute multiple methods?

　　It can be used addLoadEvent method, which is written by someone else, so it is not the DOM approach, if a direct copy the following code on it!

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();
                    }
                }
            }

　　With this code, you can bind multiple methods to onload:

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

            addLoadEvent(func1);
            addLoadEvent(func2);

　　Principle as:

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

　　The following look at the implementation of the results:

　　Perfect purpose!

　　Code analysis

　　Often, although only a few lines of code, but the first contact, inevitably confusing!

　　Read the following code:

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();
                    }
                }
            }

　　This method requires a parameter func, is passed method name.

 

　　When we use a addLoadEvent time, it is equivalent to calling window.onload = func1;

　　At this time window.onload should be null, and therefore judge sentences typeof window.onload! = 'Function' returns to true .

　　After the execution, you can see window.onload method becomes func1:

　　

　　When you call addLoadEvent again, enter part of the else. The original oldonload func2 method to bind together into a new approach.

　　After the execution, see window.onload method becomes like the following:

　　

　　So, when there are a plurality of methods, the following method will be constructed:

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

　　This can be in the onload, multiple methods of binding.

 

　　To sum up, the method is to put  all want the performance of a onload period  configured as a  method of execution for the column  , and then use onload implementation of this cohort method .

 

　　reference

　　[1] addLoadEvent (func) Detailed: http: //www.cnblogs.com/joyan/archive/2010/06/29/1767577.html

　　[2] script home addLoadEvent Description: http: //www.jb51.net/article/21707.htm

Reproduced in: https: //my.oschina.net/u/204616/blog/545289