快捷導(dǎo)航

把多個JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法

更新時間：2016年09月04日 10:27:41 投稿：jingxian

下面小編就為大家?guī)硪黄讯鄠€JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

為了讓函數(shù)只在頁面加載完畢后才得到執(zhí)行，我們會把函數(shù)綁定到onload事件上：

window.onload = userFunction

但如果有兩個函數(shù)：firstFunction() 和 secondFunction()，都想讓它們在頁面加載完畢后得到執(zhí)行，該怎么辦？如果這樣：

window.onload = firstFunciton;
window.onload = secondFunction;

只有最后一個函數(shù)能被執(zhí)行。由此可得：每個事件處理函數(shù)只能綁定一條指令。

但我們可以這樣做：

   window.onload = function(){
     firstFunction();
     secondFunction();
   }

這是一個解決辦法。

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

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

下面是addLoadEvent()函數(shù)將要完成的操作：

1. 把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。

2. 如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就像平時那樣把形函數(shù)添加給它。

3. 如果在這個處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把形函數(shù)追加到現(xiàn)有指令的末尾。

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

function addLoadEvent(func){
     var oldonload = window.onload;
     if(typeof window.onload != 'function'){
        window.onload = func;
     }else{
        window.onload = function(){
          oldonload();
          func();
        }
     }
}

這相當(dāng)于為那些將在頁面加載完畢時執(zhí)行的函數(shù)創(chuàng)建了一個隊(duì)列。如果想把剛才那兩個函數(shù)添加到隊(duì)列中去，只需要寫出以下代碼即可：

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

以上這篇把多個JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS定義回車事件(實(shí)現(xiàn)代碼)
基于JS定義回車事件的實(shí)現(xiàn)代碼，需要的朋友可以參考下
2013-07-07
js數(shù)組的五種迭代方法及兩種歸并方法(推薦)
下面小編就為大家?guī)硪黄猨s數(shù)組的五種迭代方法及兩種歸并方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
Javascript Web Worker使用過程解析
這篇文章主要介紹了Javascript Web Worker使用過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-03-03
js分解url參數(shù)（面向?qū)ο?極簡主義法應(yīng)用）
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡主義法)和一個分解url參數(shù)面試題，我作了一下修改，記錄下來
2012-08-08
微信小程序?qū)崿F(xiàn)紅包雨功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包雨功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
前端處理文本換行展示4種處理方法
在處理前端顯示后端傳遞的包含換行符的文本時,可以通過多種方法實(shí)現(xiàn)換行顯示,這篇文章主要介紹了前端處理文本換行展示4種處理方法,這些方法幫助前端正確展示格式化文本,解決了文本堆疊的問題,需要的朋友可以參考下
2024-10-10
Ajax 加載數(shù)據(jù) 練習(xí)代碼
這篇文章主要介紹了Ajax 加載數(shù)據(jù)，主要是為了查詢表的顯示，不用嵌入php通過ajax調(diào)用，現(xiàn)在手機(jī)端的更多顯示功能都是通過ajax實(shí)現(xiàn)的
2017-01-01
jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
這篇文章給大家分享jfinal與bootstrap之間的登錄跳轉(zhuǎn)，具體內(nèi)容包含有點(diǎn)擊登錄彈出模態(tài)框、點(diǎn)擊登錄確認(rèn)按鈕后的validate、jfinal的validate、jfinal的session管理、ajax請求與返回信息處理、頁面間智能跳轉(zhuǎn)。感興趣的朋友跟著小編一起看看吧
2015-09-09
詳解怎么檢測和防止JavaScript死循環(huán)
最近工作中遇到了一些死循環(huán)導(dǎo)致的頁面卡死問題,經(jīng)過 trouble shooting 和代碼修復(fù)解決了問題,所以下面這篇文章主要給大家介紹了怎么檢測和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下
2021-11-11
基于JS實(shí)現(xiàn)簡單滑塊拼圖游戲
本文通過實(shí)例代碼給大家介紹了JS實(shí)現(xiàn)簡單滑塊拼圖游戲，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-10-10