Javascript 多个对象上的jQuery when（）.done（）

我对progressbar有问题。 我想在加载下一个函数后更改progressbar。 这是我的代码：

var tick=1;
var count=10; 
function example(){
  $('#progress div').css('width',(tick*count)+'%');
  tick++;
}
$.when($.getJSON("data1.json",function(_a){data1=_a;})).done(function(){
  example();
  $.when(someLoadFunction).done(function(){
    example();
    $.when(someLoadFunction2).done(function(){
      example();
      //7 more...
    });
  });
});

---

如何简化脚本，以便将来可以轻松扩展。

创建要调用的函数数组，然后循环这些函数。不是jQuery用户，因此可能有更有效的方法来实现这一点，但至少这是可以合理维护的。或者像@A.Wolff建议的那样。。。使用链接

注意：如果您想对每个函数使用不同的回调，请使用function/callback将对象文本传递到函数中（在这种情况下不需要回调参数）

$.when（$.getJSON（“data1.json”），函数（_a）{
数据1=_a；
})).done（函数（）{
var functorr=[]；//函数数组
loopWhen（functionArr，example（））；
});
函数loopWhen（functorr，回调）{
（变量i=0；i

创建一个要调用的函数数组，然后循环调用这些函数。不是jQuery用户，因此可能有更有效的方法来实现这一点，但至少这是可以合理维护的。或者像@A.Wolff建议的那样。。。使用链接

注意：如果您想对每个函数使用不同的回调，请使用function/callback将对象文本传递到函数中（在这种情况下不需要回调参数）

$.when（$.getJSON（“data1.json”），函数（_a）{
数据1=_a；
})).done（函数（）{
var functorr=[]；//函数数组
loopWhen（functionArr，example（））；
});
函数loopWhen（functorr，回调）{
（变量i=0；i

您可以使用

.queue（）

，

.promise（）

，

.then（）

。将函数存储在数组中，在解析当前函数承诺时按顺序调用数组中的下一个函数。从返回jQuery promise对象，并将

示例

用作

的函数参数。然后（）


var tick=0；
var计数=10；
变量url=”https://gist.githubusercontent.com/"
+“宾客271314/23e61e522a14d45a35e1/”
+“raw/a5ac6cffdc1ffab39f9db425844721b528751654/a.json”；
//处理错误
函数错误（e）{
控制台日志（e）
}
函数示例（数据）{
//做事
控制台日志（数据）；
$（“#结果”）。追加（数据+”
“
”；
//return`.promise（）`
返回$（“#进度分区”）
.css（“宽度”（++勾号*计数）+“%”）
.承诺
}
功能进展（fn，下一步）{
返回fn（）.then（示例）.then（下一个）.fail（错误）
}
//例如，`someLoadFunction`、`someLoadFunction2`。。
函数someFunction（）{
返回延迟的美元（函数（dfd）{
返回dfd.resolve（勾选）
})
}
//例如，`$.getJSON（）`、`someLoadFunction`、`someLoadFunction2`。。
var arr=[
函数（）{return$.getJSON（url）}
，someFunction，someFunction，someFunction/`someLoadFunction2`。。
，someFunction，someFunction，someFunction/`someLoadFunction5`。。
，someFunction，someFunction，someFunction/`someLoadFunction8`。。
];
$（{}）.queue（“progress”，$.map（arr，function（deferred））{
返回$.proxy（进度、空、延迟）
})).退出（“进度”）.承诺（“进度”）
.then（function（）{console.log（“complete”）}）
#进度部门{
背景：蓝色；
宽度：0px；
高度：20px；
边框：2倍纯绿；
}

您可以使用
.queue（）
，
.promise（）
，
.then（）
。将函数存储在数组中，在解析当前函数承诺时按顺序调用数组中的下一个函数。从返回jQuery promise对象，并将
示例
用作
的函数参数。然后（）


var tick=0；
var计数=10；
变量url=”https://gist.githubusercontent.com/"
+“宾客271314/23e61e522a14d45a35e1/”
+“raw/a5ac6cffdc1ffab39f9db425844721b528751654/a.json”；
//处理错误
函数错误（e）{
控制台日志（e）
}
函数示例（数据）{
//做事
控制台日志（数据）；
$（“#结果”）。追加（数据+”
“
”；
//return`.promise（）`
返回$（“#进度分区”）
.css（“宽度”（++勾号*计数）+“%”）
.承诺
}
功能进展（fn，下一步）{
返回fn（）.then（示例）.then（下一个）.fail（错误）
}
//例如，`someLoadFunction`、`someLoadFunction2`。。
函数someFunction（）{
返回延迟的美元（函数（dfd）{
返回dfd.resolve（勾选）
})
}
//例如，`$.getJSON（）`、`someLoadFunction`、`someLoadFunction2`。。
var arr=[
函数（）{return$.getJSON（url）}
，someFunction，someFunction，someFunction/`someLoadFunction2`。。
，someFunction，someFunction，someFunction/`someLoadFunction5`。。
，someFunction，someFunction，someFunction/`someLoadFunction8`。。
];
$（{}）.queue（“progress”，$.map（arr，function（deferred））{
返回$.proxy（进度、空、延迟）
})).退出（“进度”）.承诺（“进度”）
.then（function（）{console.log（“complete”）}）
#进度部门{
背景：蓝色；
宽度：0px；
高度：20px；
边框：2倍纯绿；
}

第一个简化是不要使用
$。当
在那里时，因为不管怎么说，您每次只承诺一个承诺，例如：
$。当（someLoadFunction）.done（function（）{…}）
与
someLoadFunction（）.done（function（）{…}）相同。现在你可以并行地运行所有这些任务，而不是一个接一个地运行吗？第一个简化是不要在那里使用
$。当
时，因为不管怎样，你每次只承诺一个，例如：
$。当（someLoadFunction）.done（function（）{…}）
与
someLoadFunction（）.done（function（）{…}）相同。现在，你可以并行运行所有这些任务，而不是一个接一个吗？很好@A.Wolff:-）如果我说实话，我不喜欢这个解决方案。。。。这对我来说太乱了。很好@A.Wolff:-）如果我说实话，我不喜欢这个解决方案。。。。太乱了
$.when($.getJSON("data1.json", function(_a) {
  data1 = _a;
})).done(function() {
  var functionArr = []; //array of functions
  loopWhen(functionArr, example());
});


function loopWhen(functionArr, callback) {
   (var i = 0; i < functionArr.length; i++) {
     $.when(functionArr[i]).done() {
       callback();
     };
   };
 };