jquery - 延期与承诺

Question

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

我应该使用什么来满足我的需要？我只想调用fooExecute(). 例如，我只需要fooStart()andfooEnd()来切换 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.???
});

score 135 · Accepted Answer

第一：你不能使用$.Promise();，因为它不存在。

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

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

例子：

1. ( produce ) 当你想为你自己的函数提供promise-support时，你使用deferred objects。您计算一个值并希望控制何时解决承诺。

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 ) 如果你调用的函数本身返回一个promise，那么你不必创建你自己的延迟对象。你可以返回那个承诺。在这种情况下，该函数不会创造价值，而是转发它（有点）：

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 调用）并基于该值计算（产生）不同的值。

相关问题：

score 2 · Accepted Answer

承诺是您可以在延迟集合完成时执行的延迟对象上设置的东西。

来自jQuery 文档的示例：

<!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>

这是在 JSFiddle

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

jquery - 延期与承诺

2 回答 2

例子：

Related

Reference