延期与承诺答案

【问题标题】：Deferred versus promise延期与承诺
【发布时间】：2013-06-22 21:21:25
【问题描述】：

除了jQuery版本之外，Deferred和Promise有什么区别？

我应该使用什么来满足我的需要？我只想打电话给fooExecute()。例如，我只需要 fooStart() 和 fooEnd() 来切换 html div 状态。

//I'm using jQuery v2.0.0
function fooStart() { /* Start Notification */ }
function fooEnd() { /* End Notification */ }
function fooExecute() { /* Execute the scripts */ }

$('#button1').on('click', function() {
    var deferred1 = $.Deferred();
    var promise1 = $.Promise();

    deferred1.???

    promise1.???
});

【问题讨论】：

Possible help?
你不能改变承诺的状态。因此，它被处理到请求逻辑（可能没有业务篡改条件逻辑 - 解决或拒绝） - 等待解决 - 来自实际创建延迟的工厂逻辑。 Deferred 可以是 resolved 或 rejected 更改其状态，它的 Promise 也将反映。告诉我你想如何使用延迟点击？
我不认为你的例子可以从承诺中受益（或者我不明白）。也许看看How can jQuery deferred be used?。

标签： jquery jquery-deferred promise

【解决方案1】：

首先：您不能使用$.Promise();，因为它不存在。

延迟对象是可以创建承诺并将其状态更改为resolved 或rejected 的对象。如果您编写自己的函数并希望向调用代码提供承诺，则通常使用延迟。你是价值的生产者。

promise，顾名思义，就是对未来价值的承诺。您可以将回调附加到它以获取该值。承诺已“给予”您，您是未来价值的接收者。
你不能修改 Promise 的状态。只有创建 promise 的代码可以改变它的状态。

示例：

1。（produce）当您想为您自己的函数提供承诺支持时，您可以使用延迟对象。您计算一个值并希望控制何时解决承诺。

function callMe() {
    var d = new $.Deferred();
    setTimeout(function() {
        d.resolve('some_value_compute_asynchronously');
    }, 1000);
    return d.promise();
}

callMe().done(function(value) {
    alert(value);
});

2。 (forward) 如果您调用的函数本身返回一个承诺，那么您不必创建自己的延迟对象。你可以返回那个承诺。在这种情况下，该函数不会创造价值，而是将其转发（有点）：

function fetchData() {
    // do some configuration here and pass to `$.ajax`
    return $.ajax({...});
}

fetchData().done(function(response) {
    // ...
});

3。（receive）有时您不想创建或传递承诺/值，而是想直接使用它们，即您是某些信息的接收者：

$('#my_element').fadeOut().promise().done(function() {
    // called when animation is finished
});

当然，所有这些用例也可以混合使用。您的函数可以是值的接收者（例如来自 Ajax 调用）并基于该值计算（生成）不同的值。

相关问题：

【讨论】：

【解决方案2】：

promise 是您可以在延迟集合完成时执行的延迟对象上设置的内容。

来自jQuery documentation的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  height: 50px; width: 50px;
  float: left; margin-right: 10px;
  display: none; background-color: #090;
}
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>


<script>
$("button").on( "click", function() {
  $("p").append( "Started...");

  $("div").each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * (i+1) );
  });

  $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>

</body>
</html>

Here it is in JSFiddle

这会在每个div 上运行一个函数，并在所有.each 执行完成后执行.promise 代码。

【讨论】：