Javascript 有异步函数调用时的同步流程

Question

我花了一整天阅读 jquery deferred、promise 等

我的问题很简单。

我有一个调用其他 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

Answer 1

因为你没有post你所说的你用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();

Answer 2

return jQuery promise 对象的 Promise 来自函数。使用 .then() 链接 return 承诺对象的承诺或函数。

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>

Answer 3

$(".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() 函数。

如果您需要有关此的更多信息，请告诉我

Answer 4

在 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();

还在用promises，只是你看不出来。

Javascript 有异步函数调用时的同步流程

Javascript synchronous flow when there are asynchronous function call

javascript

jquery

asynchronous

synchronous