JS腳本載入後再執行對應回呼函數的操作
- php中世界最好的语言原創
- 2018-03-17 13:19:471300瀏覽
這次帶給大家JS腳本載入後再執行對應回呼函數的操作，JS腳本載入後再執行對應回呼函數的注意事項有哪些，以下就是實戰案例，一起來看一下。
專案中常常會遇到這樣的問題：當某個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%',
itempider : '<hr>',
listDOM : 'all'
});
*/
console.log('脚本加载完成啦');
});
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是JS腳本載入後再執行對應回呼函數的操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！