溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目中經常會遇到這樣的問題：當某個 js 腳本加載完成后再執行相應任務，但很多朋友可能并不知道怎么判斷我們要加載的 js 文件是否加載完成，如果沒有加載完成我們就調用 js 文件里面的函數是不會成功的。本文主要講解怎么在成功加載 js 文件后再執行相應回調任務。
基本思路
我們可以動態的創建 <script> 元素，然后通過更改它的 src 屬性來加載腳本，但是怎么知道這個腳本文件加載完成了呢？因為有些函數需要在腳本加載完成才能調用。IE 瀏覽器中可以使用 <script> 元素的 onreadystatechange 來監控加載狀態的改變，并通過判斷它的 readyState 是 loaded 或 complete 來判斷腳本是否加載完成。而非 IE 瀏覽器可以使用 onload 來直接判斷腳本是否加載完成。
動態腳本簡單示例
一個 簡單 的實現過程如下：
// IE下：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onreadystatechange = function() {
if(this.readyState === 'loaded' || this.readyState === 'complete') {
console.log('加載成功！')
}
}
script.setAttribute('src', src)
HEAD.appendChild(script)
// Chrome等現代瀏覽器：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onload = function() {
console.log('加載成功!')
}
script.setAttribute('src', src)
HEAD.appendChild(script)
原理很簡單，根據這兩個簡單的原理，我們進行一些修改，我把改成了兩個函數，分別是 串行加載 和 并行加載 。
串行和并行動態腳本
當傳一個包含多個JS文件路徑的數組時，串行加載函數從第一個腳本文件加載開始，每加載成功一個便開始加載下一個腳本文件，全部加載完成后執行回調函數。而并行加載是一開始便加載全部的腳本文件，也就是他們從同一點開始加載，當全部加載完成后，執行回調函數。
/**
* 串行加載指定的腳本
* 串行加載[異步]逐個加載，每個加載完成后加載下一個
* 全部加載完成后執行回調
* @param {Array|String} scripts 指定要加載的腳本
* @param {Function} callback 成功后回調的函數
* @return {Array} 所有生成的腳本元素對象數組
*/
function seriesLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var last = scripts.length - 1;
//遞歸
var recursiveLoad = function(i) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 異步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(i !== last) {
recursiveLoad(i + 1);
} else if (typeof(callback) === 'function') {
callback()
};
}
}
// 同步
s[i].setAttribute('src', scripts[i]);
HEAD.appendChild(s[i]);
};
recursiveLoad(0);
}
/**
* 并行加載指定的腳本
* 并行加載[同步]同時加載，不管上個是否加載完成，直接加載全部
* 全部加載完成后執行回調
* @param {Array|String} scripts 指定要加載的腳本
* @param {Function} callback 成功后回調的函數
* @return {Array} 所有生成的腳本元素對象數組
*/
function parallelLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var loaded = 0;
for(var i = 0; i < scripts.length; i++) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 異步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
loaded++;
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(loaded === scripts.length && typeof(callback) === 'function') callback();
}
};
// 同步
s[i].setAttribute('src',scripts[i]);
HEAD.appendChild(s[i]);
}
}
在這里是把 <script> 標簽動態的插入到頁面中的 <head> 標簽內部，并且加載完成后標簽元素會被自動移除。
使用方法
這里聲明了一個數組變量，里面包含了兩個遠程的JS文件地址（當然 <script> 標簽調用腳本是支持跨域的）：
var scripts = [
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
"http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];
// 這兩個文件分別是 jQuery 1.4.的庫文件和 jQuery Debug 插件
// 然后你可以使用下面的方法調用并在成功后執行回調了。
parallelLoadScripts(scripts, function() {
/*
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itemDivider : '<hr>',
listDOM : 'all'
});
*/
console.log('腳本加載完成啦');
});
總結
以上所述是小編給大家介紹的JS腳本加載后執行相應回調函數操作方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
