我花了一整天时间阅读有关jquery延期,承诺等的内容。
我的问题很简单。
我有一个函数可以调用其他4个函数,其中一些函数具有从服务器获取数据的异步调用。
function A() {
async call
console.log("1");
}
function B() {
normal code
console.log("2");
}
function C() {
async call
console.log("3");
}
function xyz() {
A();
B();
C();
print str;
}
预期结果是123str。
相反,我得到312或213.基本上3个功能不等待另一个的结束。我已经尝试过.done与$ .when(a).then(b),诺言。
但没有任何效果。有人可以给我一个有效的准系统示例代码吗?
编辑:
function setId() {
var doc = sessionStorage.getItem("urlDoc");
var user = sessionStorage.getItem("LoggedUser");
var string = "urlDoc=" + doc + "&user=" + user;
if (sessionStorage.getItem("countId") === null) {
$.ajax({
type: 'POST',
url: 'php/findTemporaryId.php',
data: string,
success: function (data) {
sessionStorage.setItem("countId", data);
countId = sessionStorage.getItem("countId");
id = countId;
console.log("1");
},
error: function () {
alert("Server Error");
}
});
} else {
sessionStorage.setItem("countId", parseInt(sessionStorage.getItem("countId")) + 1);
countId = sessionStorage.getItem("countId");
id = countId;
console.log("1");
}
然后
function setAuthor() {
author = sessionStorage.getItem('LoggedUser');
console.log("2");
}
然后
function getData() {
$.ajax({
type: 'POST',
url: 'php/date.php',
success: function (data) {
date = data;
console.log("3");
},
error: function () {
alert("Error");
}
});
}
这就是我称呼他们的方式
function saveSelectionFragment() {
setId();
setAuthor();
getData();
}
这是firebug控制台。
http://i.imgur.com/zQ0Mk4E.jpg
答案 0 :(得分:3)
由于你没有发表任何你曾说过的Promises尝试过的内容,以下是它的工作原理..
function A() {
return new Promise(function(done) {
// emulate async call with setTimeout
setTimeout(function() {
console.log("1");
done();
}, 100);
});
}
function B() {
return new Promise(function(done) {
// "normal" code
console.log("2");
done();
});
}
function C() {
return new Promise(function(done) {
// emulate async call with setTimeout
setTimeout(function() {
console.log("3");
done();
}, 100);
});
}
function xyz() {
A()
.then(B)
.then(C)
.then(function() {
// whatever this is supposed to be
//print str;
// maybe you meant..
console.log('str');
});
}
xyz();
答案 1 :(得分:0)
return
来自函数的jQuery promise对象的Promise
。使用.then()
链接返回promise对象的promises或函数。
function A() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve("1")
}, Math.floor(Math.random() * 2500))
})
.then(function(result) {
console.log(result);
return result
});
}
function B() {
var value = "2";
console.log(value);
return value
}
function C() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve("3")
}, Math.floor(Math.random() * 2500))
})
.then(function(result) {
console.log(result);
return result
});
}
function xyz(results) {
return A()
.then(function(data) {
results.push(data);
return B()
})
.then(function(data) {
var value = "3";
results.push(data);
return C()
})
.then(function(data) {
var value = "str";
results.push(data, value);
console.log(value);
return results
})
}
xyz([])
.then(function(results) {
console.log("complete:", results);
})
.fail(function(err) {
console.log(err);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
答案 2 :(得分:0)
$(".button").click(function(){
a(function(){
b(function(){
c(function(){
d(function(){
});
});
});
});
});
function a(callback){
console.log("1");
callback();
}
function b(callback){
console.log("2");
callback();
}
function c(callback){
console.log("3");
callback();
}
function d(callback){
console.log("4");
callback();
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button class="button" >ClickToCall</button>
&#13;
您可能需要尝试使用所有功能进行回调。 当我们需要管理这种类型的过程时。我总是使用回调来管理完整的流程。在函数a,b,c,d中你可以调用ajax,并且在ajax成功时你需要传递callback()函数。
如果您需要有关此
的更多信息,请与我们联系答案 3 :(得分:0)
在Chrome和Firefox Developer Edition中,您现在可以使用async
/await
。直截了当:
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function A() {
await wait(100);
console.log("1");
}
function B() {
console.log("2");
}
async function C() {
await wait(100);
console.log("3");
}
async function xyz() {
await A();
B();
await C();
console.log("Done.");
}
xyz();
&#13;
它仍在使用承诺,但你几乎无法分辨。