Javascript同步流程当有异步函数调用时
问题描述：
我花了整整一天的时间阅读关于jquery延期，promise等内容Javascript同步流程当有异步函数调用时
我的问题其实很简单。
我有一个函数调用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个功能不等待另一个的结束。 （a）。然后（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();
}
这里的萤火虫控制台。 http://i.imgur.com/zQ0Mk4E.jpg
答
既然你没有张贴任何你说你试图用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
非常感谢。 –
答
return从功能jQuery的Promise的承诺目标。使用.then()来链接返回promise对象的promise或函数。
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>
答
$(".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();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button class="button" >ClickToCall</button>可能是你需要尝试了所有功能的回调。 当我们需要管理这种类型的过程。我总是使用回调来管理完整的过程。在函数a，b，c，d中，您可以放入ajax调用，并在成功调用ajax时需要传递callback（）函数。
让我知道你是否需要对此
答
在您现在可以使用async/await Chrome和Firefox开发版的更多信息。直截了当：
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();它仍然使用的承诺，但你也很难分辨。
发布异步调用和正常代码 – bugwheels94
您调用A（）并立即调用B（）。需要进行回调或返回一个承诺，一旦该承诺完成（或称为回调），您需要调用B，然后调用C（与A相同） – yBrodsky
相同的伪代码：'A（）。then （function（）{B（）; return C（）;}）。then（function（）{print str;}）;'。假设'A'和'C'返回承诺。 –