假設兩個函數:firstFunction和secondFunction。如果想讓這兩個函數都在頁面加載時得到執行,該怎麼辦?如果把它們逐漸綁定到onload事件上,它們當中將只有最後那個才會被實際執行:
window.onload = firstFunction; window.onload = secondFunction;
secondFunction 將取代firstFunction。你可能會想:每個事件處理函數只能綁定一條指令。
有一種辦法可以避免這一難題:可以先創建一個匿名函數來容納這兩個函數,然後把那個匿名函數綁定到onload事件上,如下所示:
window.onload = function () { firstFunction(); secondFunction(); }
他確實能很好的工作——在需要綁定的函數不是很多的時候,這應該是最簡單的解決方案了。
這裡還有一個彈性最佳的解決方案——不管你打算在頁面加載完畢時執行多少個函數,他都可以應付自如。這個方案需要額外編寫一些代碼,但好處是一旦有了那些代碼,把函數綁定到window.onload事件就非常易行了。
下面是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);
這個函數非常實用,尤其是在代碼量變得越來越復雜的時候。無論打算在頁面加載完畢時執行多少個函數,只要多寫一條語句就就可以安排好一切。