延迟对象与承诺对象

87

除了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.???
});

【可能有帮助?】(http://stackoverflow.com/questions/13384564/using-jquery-deferred-and-promise) - Codeman
2
你不能改变 Promise 的状态。因此,它被处理为请求逻辑(可能没有干涉条件逻辑的业务 - 解决或拒绝) - 等待解决 - 来自实际创建该延迟的工厂逻辑。Deferred 可以通过更改其状态来 resolvereject,其 Promise 也将反映这一点。告诉我你想如何使用 deferreds 进行点击? - Andrevinsky
我认为你的例子不需要使用Promise(或者我没有理解它)。也许可以看一下这个链接:如何使用jQuery deferred? - Felix Kling
2个回答

144

首先,你不能使用$.Promise();因为它不存在。

延迟对象是一个对象,可以创建一个promise并将其状态更改为resolvedrejected。如果你编写自己的函数并想向调用代码提供promise,则通常使用deferreds。你是价值的生产者

Promise就像它的名字一样,是关于未来值的承诺。你可以附加回调以获取该值。promise被“给”给你,你是未来值的接收者
你无法修改promise的状态。只有创建promise的代码才能更改其状态。

示例:

1. (生成)当你想要为自己的函数提供promise支持时,你使用延迟对象。你计算一个值,并想要控制何时解析promise。

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,那么你就不需要创建自己的deferred对象。你可以直接返回该promise。在这种情况下,函数并不创建值,而是将其转发(有点像):

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

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

3. (receive) 有时候你不想创建或传递 promises/values,而是直接使用它们,也就是说,你是一些信息的接收者:

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

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


相关问题:


2

Promise是一种可以设置在延迟对象上的东西,它会在延迟集合完成时执行。

以下是来自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运行一个函数,并在所有.each执行完成后执行.promise代码。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接