首页 >web前端 >js教程 >jQuery+deferred实现异步顺序加载JS文件

jQuery+deferred实现异步顺序加载JS文件

php中世界最好的语言
php中世界最好的语言原创
2018-04-23 15:11:251127浏览

这次给大家带来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