Question

我从未使用过jQuery $ .Deferred，到目前为止我还没有找到一个可以让我理解的例子。

我需要的是能够按顺序执行3个单独的任务，步骤1，步骤2和步骤3.步骤2应等待步骤1完成，步骤3应等待步骤2完成，然后再执行。

我正在尝试以下但似乎无处可去：

        var construct = new $.Deferred();

        construct.done(function() {
            console.log('Step 1');
        });

        construct.done(function() {
            setTimeout(5000);
            console.log('Step 2');
        });

        construct.done(function() {
            console.log('Step 3');
        });

        construct.resolve();

有没有人在小提琴中有简单的工作？

Answer 1

为了将Deferred链接起来，您必须使用then，然后返回新的Deferred：

var construct = $.Deferred();

construct.then(function() {
    console.log('Step 1');
})
.then(function() {
    return $.Deferred(function (dfd) {
        setTimeout(function () {
            console.log('Step 2');
            dfd.resolve();
        }, 5000);
    });
})
.then(function() {
    console.log('Step 3');
});

construct.resolve();

这是小提琴：http://jsfiddle.net/fMMsz/

Answer 2

我一直在为了异步操作而写了一些东西，但如果你想按顺序，你可以试试这样的东西。我有setInterval来模拟长时间运行的操作。

这背后的想法是为每个被调用的函数返回一个Deferred对象，然后指示为done或fail定义的回调（如果是这样的话）基于返回的结果。

JS Fiddle

var loadQueue = function() {
    var dfrQueue1 = new $.Deferred();
    var i = 0;
    var loop = window.setInterval(function() {
      ++i;
      console.log('queue 1 - running: '+i);
      if (i >= 10) {
         // pass optional param to success callback
         dfrQueue1.resolve('queue 1'); 
         clearInterval(loop);
      }
    }, 1000);

    console.log('initiating queue 1');
    return dfrQueue1.promise();
};

var loadQueue2 = function() {
    var dfrQueue2 = new $.Deferred();
    var i = 0;
    var loop = window.setInterval(function() {
      ++i;
      console.log('queue 2 - running: '+i);
      if (i >= 5) {
          // pass optional param to success callback
          dfrQueue2.resolve('queue 2');
          clearInterval(loop);
      }
    }, 1000);

    console.log('initiating queue 2');
    return dfrQueue2.promise();
};

var t = loadQueue().done(loadQueue2);

用于按顺序执行代码的jQuery Deferred方法示例

2 个答案: