javascript - 顺序函数调用，其中一个使用 setTimeout

Question

我想按顺序调用三个函数 someTask1、someTask2 和 someTask3。但是，函数 someTask2 涉及 Ajax 调用，并使用 setTimeout 递归调用自身，除非返回一个期望值。代码如下所示:

doListOfTasks: function(myparam){
    var someObj = someTask1(myParam);
    someTask2(someObj);
    someTask3(someObj);
},
someTask2: function(someObj){
    $.ajax({
          url: "someUrl.do",
          type: "POST",
          data: ({"id": rowObject.instanceId}),
          dataType: "json",
          async:false,
          success: function(res){
              if(res.prop1 != 'desired'){
                  setTimeout(function(){someTask2(someObj);}, 2000);
              }
          }
       }
    );
},

您可能已经猜到了，此代码的执行不会等待 someTask2 在调用 someTask3 之前返回。

我希望 doListOfTasks 中的代码按顺序执行。我该怎么做？

此外，我不想在 success 回调中对 someTask3 进行硬编码。例如。我不想这样做:

          success: function(res){
              if(res.prop1 != 'desired'){
                  setTimeout(function(){someTask2(someObj);}, 2000);
              }else{
                  someTask3(someObj);
              }

          }

如何实现这一点？

谢谢

---

编辑 #1

问题是无法调用函数...但问题是同步。我希望 someTask2 完成它正在做的任何事情，只有在那时 someTask3 才会被调用。

someTask2 使用 setTimeout 重复调用自身...我猜这会触发一个新线程并且 someTask2 在第一次调用后返回...触发 someTask3 在主线程中。但是，在满足所需条件之前，每次调用 setTimeout 都会产生(并被杀死)单独的线程。

这就是为什么当 someTask2 仍在循环时，对 someTask3 的调用会触发。

不确定我的正确性。

Answer 1

您可以在 jquery 中使用 Deferred 实现此目的:

$.when(someTask1(), someTask2(), someTask3()).then(successFunc, errorFunc);

您需要返回一个带有 promise 值的自定义 .Deferred 对象。

someTask2: function(someObj)
{
    var def = $.Deferred();

    $.ajax({
          url: "someUrl.do",
          type: "POST",
          data: ({"id": rowObject.instanceId}),
          dataType: "json",
          async:false,
          success: function(res){
              if(res.prop1 != 'desired'){
                  setTimeout(function(){someTask2(someObj);}, 2000);
              }
              else
              {
                def.resolve(res);
              }
          }
       }
    );

    return def.promise();
}

例如:

function someTask1()
{
    var def = $.Deferred();
    def.resolve('i\'m data resolved from task1');
    return def.promise();
}

function someTask2(someObj)
{
    var def = $.Deferred();

    var count = 0;
    var f = function() {
        console.log(++count);
        if (count > 2) {
            def.resolve('whoop we got the value we wanted in task 2 after many tries: ' + count);
        }
        else
            setTimeout(f, 1000);
    };
    f();
    return def.promise();
}

function someTask3()
{
    var def = $.Deferred();
    def.resolve('and hello from task3!');
    return def.promise();  
}

var success = function(x) {
  console.log('success:', arguments);
};

var error = function() {
      console.log('oh no an error occured in one of the tasks.');
};

$.when(someTask1(), someTask2(), someTask3()).then(success , error);

会显示

1
2
3
success: ["i'm data resolved from task1",
          "whoop we got the value ...k 2 after many tries: 3",
           "and hello from task3!"]

可用的 fiddle : http://jsfiddle.net/garreh/29SW7/