把多個JavaScript函數綁定到onload事件處理函數上

爲了讓函數只在頁面加載完畢後才獲得執行，咱們會把函數綁定到onload事件上：

window.onload = userFunction

但若是有兩個函數：firstFunction() 和 secondFunction()，都想讓它們在頁面加載完畢後獲得執行，該怎麼辦？若是這樣：

     window.onload = firstFunciton;

     window.onload = secondFunction;

只有最後一個函數能被執行。由此可得：每一個事件處理函數只能綁定一條指令。

但咱們能夠這樣作：

     window.onload = function(){

          firstFunction();

          secondFunction();

     }

這是一個解決辦法。

 

不過，還有一個更通的解決方案——額外編寫一些代碼，但好好處是，有了這些代碼，把函數，無論它們有多少，綁定到window.onload事件上的工做就很是簡明易行了。

這個函數的的名字是addLoadEvent，它是由Simon Willison編寫的。它只有一個參數：打算在頁面加載完畢時執行的函數的名字。

下面是addLoadEvent()函數將要完成的操做：

1. 把現有的window.onload事件處理函數的值存入變量oldonload。
2. 若是在這個處理函數上尚未綁定任何函數，就像平時那樣把形函數添加給它。
3. 若是在這個處理函數上已經綁定了一些函數，就把形函數追加到現有指令的末尾。

下面是addLoadEvent()函數的代碼清單：

     function addLoadEvent(func){

          var oldonload = window.onload;

          if(typeof window.onload != 'function'){

               window.onload = func;

          }else{

               window.onload = function(){

                    oldonload();

                    func();

               }

          }

     }

 

這至關於爲那些將在頁面加載完畢時執行的函數建立了一個隊列。若是想把剛纔那兩個函數添加到隊列中去，只須要寫出如下代碼便可：

     addLoadEvent(firstFunction);

     addLoadEvent(secondFunction);