javascript - 什么时候使用 jQuery 动画 promise 而不是回调？

Question

我有以下查询。 何时使用:

$('#box').hide(2000).promise().done(function(){
     $('#output').text('Box is hidden');
});

代替这个:

$('#box').hide(2000,function(){
     $('#output').text('Box is hidden');
});

在 jQuery 动画中使用 .promise() 方法有哪些有用的场景？

谢谢

Answer 1

如果您只是为一个项目设置动画，则没有理由使用 promise 而不是直接回调。在这种特殊情况下，当您尝试协调多个不同的异步操作时，promise 会更有用(这通常是 promises 最有用的地方)。

假设您有一大堆要隐藏的项目，并且当它们全部完成时您想要一个回调。然后，这将完全做到这一点:

$('.items, .boxes').hide(2000).promise().then(function(){
     $('#output').text('All hidden');
});

或者，假设您想知道多个不同的动画何时完成，因此您需要协调多个 Action 。 Promises 具有内置功能，如果没有 promises，则需要手动编写更多代码:

var p1 = $('.items, .boxes').hide(2000).promise();
var p2 = $('.sliders').slideUp(2500).promise();
var p3 = $('.openers').slideDown(1500).promise();
$.when(p1, p2, p3).then(function() {
    // all are done here
});

如果您想提交没有 promise 的代码，那么您将必须维护一个计数器，并在每个单独的回调中检查计数器以查看它们是否全部完成。这是更多的代码。现在，如果您需要处理错误或链接到此的多个其他操作，那么任何没有回调或没有一些异步支持库的选项很快就会成为编写代码的真正痛苦。这就是发明 promise 的原因。

或者，甚至超越动画，假设您想要同时协调动画和 ajax 调用(您不知道需要多长时间):

var p1 = $('.items, .boxes').hide(2000).promise();
var p2 = $.ajax(...);
$.when(p1, p2).then(function() {
    // both are done here
});

---

这是通知差异的演示。如果你按下“Reset”，然后按下“Callbacks”，你会看到你收到 5 个完成通知。如果您按下“重置”然后按下“ promise ”，您将看到当它们全部完成时您会收到 1 个完成通知。

// configure logging
log.id = "results";

$("#runPromises").click(function() {
  $('.items, .boxes').hide(2000).promise().then(function(){
       log("got done notification")
  });
});
$("#runCallbacks").click(function() {
  $('.items, .boxes').hide(2000, function(){
       log("got done notification")
  });
});

$("#reset").click(function() {
  $(".items, .boxes").show();
  $("#results").empty();
});

.items {
  height: 50px;
  width: 200px;
  background-color: red;
  margin-top: 10px;
}

.boxes {
  height: 30px;
  width: 30px;
  background-color: blue;
  margin-top: 10px;
}
#results {
  margin-top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://files.the-friend-family.com/log.js"></script>
<button id="runCallbacks">Callbacks</button> 
<button id="runPromises">Promises</button>
<button id="reset">Reset</button>
<div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
</div>
<div id="results"></div>