我有一个关于jQuery Promise级联的问题,我想简化一下。我有一个正在工作的级联函数(func1)。我在执行下一个功能之前将超时设置为2秒。我想复制并将其转换为数组归约形式(func2),但它不能像func1一样工作(超时时间不一样)。这是代码:
var Makes=[1,2,3,5,8];
$(document).ready(function(){
//func1(); //WORKS
func2(); //NOT WORKS LIKE func1
});
function func1(){
timeout().then(function(){
console.log("1");
return timeout();
}).then(function(){
console.log("2");
return timeout();
}).then(function(){
console.log("3");
return timeout();
}).then(function(){
console.log("4");
return timeout();
}).then(function(){
console.log("5");
return timeout();
});
}
function func2(){
/*Makes.reduce(function(Models,Idx){
return timeout().then(function(){
console.log(Idx);
return timeout();
//return $.when(timeout());
});
},0);*/
Makes.reduce(function(Models,Idx){
return Models.then(function(){
return timeout().then(function(){
console.log(Idx);
return timeout();
//return $.when(timeout());
});
});
},0);
}
function timeout(){
var d = $.Deferred();
setTimeout(function(){
console.log("wait for 2 sec!");
d.resolve();
},2000);
return d.promise();
}
你不应该返回timeout().then
在reduce
回调,但建立在你从以前的迭代有承诺:Models.then
。并且您应该给出一个初始承诺,即立即解决($.when()
):
function func2(){
Makes.reduce(function(Models, Idx) {
return Models.then(function () {
return timeout().then(function () {
console.log(Idx);
});
});
}, $.when()); // resolved starter promise
}
var Makes=[1,2,3,5,8];
$(document).ready(function(){
func2();
});
function func2(){
Makes.reduce(function(Models, Idx) {
return Models.then(function () {
return timeout().then(function () {
console.log(Idx);
});
});
}, $.when());
}
function timeout(){
var d = $.Deferred();
setTimeout(function(){
console.log("wait for 2 sec!");
d.resolve();
},2000);
return d.promise();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
另外,您可以使用一种“递归”函数来实现异步循环:
function func2(){
(function repeat(Idx) {
if (Idx >= Makes.length) return;
timeout().then(function () {
console.log(Makes[Idx]);
repeat(Idx+1);
});
}(0));
}
var Makes=[1,2,3,5,8];
$(document).ready(function(){
func2();
});
function func2(){
(function repeat(Idx) {
if (Idx >= Makes.length) return;
timeout().then(function () {
console.log(Makes[Idx]);
repeat(Idx+1);
});
}(0));
}
function timeout(){
var d = $.Deferred();
setTimeout(function(){
console.log("wait for 2 sec!");
d.resolve();
},2000);
return d.promise();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句