Question

我花了一整天时间阅读有关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

Answer 1

由于你没有发表任何你曾说过的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()链接返回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>

Answer 3

＆＃13;

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

如果您需要有关此

的更多信息，请与我们联系

Answer 4

在Chrome和Firefox Developer Edition中，您现在可以使用async/await。直截了当：

＆＃13;

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;

它仍在使用承诺，但你几乎无法分辨。

异步函数调用

4 个答案: