Question

具有以下3个功能：

var f1 = function(e) { setTimeout(function () { return e + 1;}, 1000); }
var f2 = function(e) { setTimeout(function () { return e + 5;}, 1000); }
var f3 = function(e) { setTimeout(function () { return e + 7;}, 1000); }

如何使用jQuery.Deferred链接调用，以便我的调用看起来像：

$.when(f1()).then(f2()).then(f3()).done(function(result){ /* I want it to be 13 when called with 0! */ });

然后用0作为输入参数调用堆栈？

我目前使用嵌套的ready: function(){}，但希望继续使用更易于管理的内容。

总结一下，我正在寻找一种方法来堆叠任意服务调用，以便它们以预定的顺序运行，并且每个N函数的输出将用作N + 1的输入

我想让我的函数保持平稳，尽可能保持jQuery代码的干净。很高兴找到一种方法以一种很好的方式传递根值，而不是在函数调用本身中对其进行硬编码。

我可以看到一个使用then与多个参数一起传递到$.when(f1, f2, f3).then(result1, result2, result3)的示例 - 但这不是我之后的事。

这是我到目前为止所拥有的：

http://jsbin.com/yaqitagelazo/1/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/external/jquery-2.1.1.min.js"></script>
</head>
<body>

    <script>
        $(function() {

            var first = function (e) {
                var d = $.Deferred();

                setTimeout(function () {

                    e = e + 1;
                    d.resolve(e);
                }, 1000);

                return d.promise();
            };

            var second = function (e) {
                var d = $.Deferred();

                e = e + 5;

                setTimeout(function () {

                    d.resolve(e);

                }, 1000);

                return d.promise();
            };

            // so far so good, passing 0 right in the call doesn't look good.
            // Q: how do I pass the value for the root function call?
            $.when(first(0)).done(function(result) { alert(result); }); 

            // Q: doesn't work at all returns on first return.
            $.when(first(0))
                .then(second())
                .done(function(result) {
                    alert(result);
                });
        });
    </script>


</body>
</html>

Answer 1

尝试

var _e = {
  e : 0
};

var f1 = function(e) { 
    return new $.Deferred(function(j) {
        _e.e = e + 1; 
        $.when(f2(5), f3(7))
        .done(function(n) {
            setTimeout(function() { 
                j.resolve(n)
            }, 1000)
        }); 
        return j.promise()
    }) 
};

var f2 = f3 = function(n) {
    _e.e = _e.e + n; 
    var dfd = new $.Deferred(); 
    setTimeout(function() { 
        dfd.resolve(_e.e)
    },1000); 
    return dfd.promise() 
};

f1(0).done(function(res) {
  console.log(res)
});

或者，

独立职能

var _e = {
    e : 0 
};

var f1 = function() { 
  return new $.Deferred(function(dfd) { 
    setTimeout(function () { 
      _e.e = _e.e + 1; dfd.resolve(_e.e);
    }, 1000); 
    return dfd.promise()
  }); 
};

var f2 = function() { 
  return new $.Deferred(function(dfd) { 
    setTimeout(function () { 
      _e.e = _e.e + 5; dfd.resolve(_e.e);
    }, 1000); 
    return dfd.promise()
  }); 
};

var f3 = function() { 
  return new $.Deferred(function(dfd) { 
    setTimeout(function () { 
      _e.e = _e.e + 7; dfd.resolve(_e.e);
    }, 1000); 
    return dfd.promise()
  }); 
};

f1(), f2(), f3().done(function(res) {
  console.log(res)
})

单一功能

var _e = {
    e : 0
};

var f1 = f2 = f3 = function(n) { 
  return new $.Deferred(function(dfd) { 
    setTimeout(function () { 
        _e.e = _e.e + n; dfd.resolve(_e.e);
    }, 3000); 
        return dfd.promise()
  }); 
};

f1(1), f2(5), f3(7).done(function(res) {
  console.log(res)
})

查询延迟堆叠呼叫

1 个答案: