用Promise管理异步操作队列

讲解如何利用jQuery的Deferred和Promise对象创建可控制的异步任务队列，实现动画、请求等任务的顺序执行、并行控制和错误回滚。 · 难度：入门 · +10XP

用Promise管理异步操作队列

jQuery的Deferred对象是早期Promise模式的实现，在现代项目中仍然可以优雅地处理多个异步操作的依赖关系。不同于只讲$.ajax的回调，本教程将演示如何封装任意异步过程（如动画、延时、自定义函数）为Promise，然后使用$.when控制并行，用.then链式调用实现顺序队列。更关键的是，你可以通过reject实现队列的中断和错误恢复。例如，一个必须按顺序执行的UI更新任务，如果中间某个步骤失败，整个队列可以自动回滚到初始状态。

function animateQueue(element, steps) {
  var dfd = $.Deferred().resolve();
  steps.forEach(function(step) {
    dfd = dfd.then(function() {
      return $(element).animate(step).promise();
    });
  });
  return dfd.promise();
}
animateQueue('.box', [{left:'100px'}, {top:'100px'}]).done(function() {
  console.log('队列完成');
});