首頁 >web前端 >js教程 >jQuery+deferred實作非同步順序載入JS文件

jQuery+deferred實作非同步順序載入JS文件

php中世界最好的语言
php中世界最好的语言原創
2018-04-23 15:11:251110瀏覽

這次帶給大家jQuery deferred實作非同步順序載入JS文件,jQuery deferred實作非同步順序載入JS檔案的注意事項有哪些,下面就是實戰案例,一起來看一下。

前段時間看了阮一峰的jQuery的deferred物件詳解一文,對jQuery中的deferred的用法了一些了解,今天看到園子裡的一篇文章:關於重構JS前端框架的失敗經驗(順便懷念那些死去的程式碼),於是把我之前寫的一個利用jQuery的deferred異步按順序載入JS檔案方案分享出來,歡迎指正。

如果你現在對jQuery中的deferred還不了解,強烈建議你看一下阮一峰的jQuery的deferred物件詳解一文。
載入JS檔的程式碼如下:

/* 
Loading 
JavaScript
 Asynchronously 
loadScript.load(["a.js", "b.js"]); 
*/ 
var loadScript = (function() { 
var loadOne = function (url) { 
var dtd = $.Deferred(); 
var node = 
document
.createElement('script'); 
node.type = "text/javascript"; 
var onload = function(){ 
dtd.resolve(); 
}; 
$(node).load(onload).bind('readystatechange', function(){ 
if (node.readyState == 'loaded'){ 
onload(); 
} 
}); 
document.
getElementsByTagName
('head')[0].appendChild(node); 
node.src = url; 
return dtd.promise(); 
}; 
var load = function(urls) { 
if(!$.isArray(urls)) { 
return load([urls]); 
} 
var ret = []; 
for (var i = 0; i < urls.length; i++) { 
ret[i] = loadOne(urls[i]); 
}; 
return $.when.apply($, ret); 
} 
return { 
load: load 
}; 
})();

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

jquery xml實作三級連動步驟詳解

使用jquery外掛程式ajaxupload進行檔案上傳

以上是jQuery+deferred實作非同步順序載入JS文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn