关于javascript：如何在jQuery 1.8.x中链接一系列延迟函数？


How do I chain a sequence of deferred functions in jQuery 1.8.x?

鉴于这些功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function func1() {
  var dfd = $.Deferred();

  setTimeout(function() {
    dfd.resolve('Password');
  }, 1000);

  return dfd.promise();
}

function func2(message) {
  var dfd = $.Deferred();

  setTimeout(function() {
    if (message == 'Password') {
      dfd.resolve('Hello World');
    }
   }, 1000);

  return dfd.promise();
}

我想找到一个更好的方法来做到以下几点。 注意这是使用jQuery 1.8.x.

1
2
3
4
5
6
7
8
9
10
var promise = func1();

promise.done(function(message1) {

  var promise2 = func2(message1);

  promise2.done(function(message2) {
    alert(message2);
  });
});

有任何想法吗？ 我认为使用jQuery #pipe或#then会起作用，但我无法弄明白。 这是一个小提琴：http：//jsfiddle.net/Z7prn/

它并不复杂(要么使用.then或.pipe，它们都是jQuery 1.8我认为都是一样的)。

1
2
3
func1().then(func2).done(function(message) {
    alert(message);
});

由于func2返回一个新的延迟对象，因此.done回调附加到该对象。

DEMO

相关讨论

我有一个类似的用例，所以我认为这应该可以帮到你。

以下方法将采用一组方法(可能会或可能不会返回Promises)并按顺序执行它们，等待每个延迟完成后再继续。 默认行为是在失败时停止; 第二个参数允许您继续调用是否失败。

完成/失败处理程序签名是(Array )函数(Array )，其中context是每个resolveWith / rejectWith调用的上下文，或者是有问题的deferred，而arguments是参数 在决议/拒绝中传递的集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
(function ($) {
   "use strict";
    var copy = function (a) {
        return Array.prototype.slice.call(a);
    };

    /**
        Handle a sequence of methods, stopping on failure by default
        @param Array<Function> chain    List of methods to execute.  Non-deferred return values will be treated as successful deferreds.
        @param Boolean  continueOnFailure   Continue executing even if one of the returned deferreds fails.
        @returns Deferred
     */
    $.sequence = function (chain, continueOnFailure) {
        var handleStep, handleResult,
            steps = copy(chain),
            def = new $.Deferred(),
            defs = [],
            results = [];
        handleStep = function () {
            if (!steps.length) {
                def.resolveWith(defs, [ results ]);
                return;
            }
            var step = steps.shift(),
                result = step();
            handleResult(
                $.when(result).always(function () {
                    defs.push(this);
                }).done(function () {
                    results.push({ resolved: copy(arguments) });
                }).fail(function () {
                    results.push({ rejected: copy(arguments) });
                })
            );
        };
        handleResult = continueOnFailure ?
                function (result) {
                    result.always(function () {
                        handleStep();
                    });
                } :
                function (result) {
                    result.done(handleStep)
                        .fail(function () {
                            def.rejectWith(defs, [ results ]);
                        });
                };
        handleStep();
        return def.promise();
    };
}(this.jQuery));

一个简单的使用示例：http：//jsfiddle.net/rG9rA/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function func1() {
  var dfd = $.Deferred();

  setTimeout(function() {
    dfd.resolve('Password');
  }, 1000);

  return dfd.promise();
}

function func2(message) {
  var dfd = $.Deferred();

  setTimeout(function() {
    if (message == 'Password') {
      dfd.resolve('Hello World');
    }
   }, 1000);

  return dfd.promise();
}

    $.sequence([func1, func2, function () { alert('done'); }]);
相关讨论