如何使用jQuery $.getScript()方法包含多个js文件
如何使用jQuery $.getScript()方法包含多个js文件
提问于 2012-08-04 04:58:14
我正在尝试将javascript文件动态地包含到我的js文件中。我对此做了一些研究，发现jQuery $.getScript()方法是一种理想的方法。
// jQuery
$.getScript('/path/to/imported/script.js', function()
{
// script is now loaded and executed.
// put your dependent JS here.
// what if the JS code is dependent on multiple JS files?
});但是我想知道这个方法是否可以一次加载多个脚本？我为什么这样问是因为有时候我的javascript文件依赖于多个js文件。
提前谢谢你。
回答 13
Stack Overflow用户
发布于 2014-04-14 19:08:35
我实现了一个简单的函数来并行加载多个脚本：
函数
function getScripts(scripts, callback) {
var progress = 0;
scripts.forEach(function(script) {
$.getScript(script, function () {
if (++progress == scripts.length) callback();
});
});
}用法
getScripts(["script1.js", "script2.js"], function () {
// do something...
});Stack Overflow用户
发布于 2013-05-21 03:38:19
在前一个脚本的回调中加载如下所需的脚本，如：
$.getScript('scripta.js', function()
{
$.getScript('scriptb.js', function()
{
// run script that depends on scripta.js and scriptb.js
});
});Stack Overflow用户
发布于 2015-10-24 07:03:21
有时需要以特定的顺序加载脚本。例如，必须在jQuery UI之前加载jQuery。这个页面上的大多数示例都是并行(异步)加载脚本的，这意味着不能保证执行的顺序。如果没有排序，依赖于x的脚本y可能会在成功加载但顺序错误的情况下中断。
我提出了一种混合方法，允许顺序加载依赖脚本+可选的并行加载+ deferred objects
/*
* loads scripts one-by-one using recursion
* returns jQuery.Deferred
*/
function loadScripts(scripts) {
var deferred = jQuery.Deferred();
function loadScript(i) {
if (i < scripts.length) {
jQuery.ajax({
url: scripts[i],
dataType: "script",
cache: true,
success: function() {
loadScript(i + 1);
}
});
} else {
deferred.resolve();
}
}
loadScript(0);
return deferred;
}
/*
* example using serial and parallel download together
*/
// queue #1 - jquery ui and jquery ui i18n files
var d1 = loadScripts([
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js",
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"
]).done(function() {
jQuery("#datepicker1").datepicker(jQuery.datepicker.regional.fr);
});
// queue #2 - jquery cycle2 plugin and tile effect plugin
var d2 = loadScripts([
"https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js",
"https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/plugin/jquery.cycle2.tile.min.js"
]).done(function() {
jQuery("#slideshow1").cycle({
fx: "tileBlind",
log: false
});
});
// trigger a callback when all queues are complete
jQuery.when(d1, d2).done(function() {
console.log("All scripts loaded");
});@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
#slideshow1 {
position: relative;
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><input id="datepicker1"></p>
<div id="slideshow1">
<img src="https://dummyimage.com/300x100/FC0/000">
<img src="https://dummyimage.com/300x100/0CF/000">
<img src="https://dummyimage.com/300x100/CF0/000">
</div>
两个队列中的脚本将并行下载，但是，每个队列中的脚本将按顺序下载，从而确保有序执行。瀑布图：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11803215
复制相关文章
相似问题