angularjs - 使用 $timeout 时的 Promise 链接

Question

我试图理解 Promise API 和链接，特别是 $timeout 与 .then() 一起使用时的计时。我对以下内容的期望是，由于 $timeout 返回一个 promise ，因此在解决之前不会调用 .then() 。

但不是 ABAB，而是一直是 ABBA。

如何使用 Promise API 来确保长时间运行的调用(或使用 $timeout 的延迟调用)在 .then() 获取之前实际完成被处决了吗？

代码

angular
  .module('app', [])
  .controller('ThenCtrl', ThenCtrl);

function ThenCtrl($timeout, $q) {
  var vm = this;

  vm.items = [];

  $q.when(pushA()).then(pushB());

  $timeout(pushA, 5000).then(pushB());

  function pushA() {
    vm.items.push('A');
  }

  function pushB() {
    vm.items.push('B');
  }
}

标记

<div ng-app="app">
  <div ng-controller="ThenCtrl as vm">
    {{vm.items}}
  </div>
</div>

我已经设置了一个 fiddle :https://jsfiddle.net/kan3c61t/

Answer 1

不要调用 .then 方法内的函数。

  ̶$̶q̶.̶w̶h̶e̶n̶(̶p̶u̶s̶h̶A̶(̶)̶)̶.̶t̶h̶e̶n̶(̶p̶u̶s̶h̶B̶(̶)̶)̶;̶
  $q.when(pushA()).then(pushB);

  ̶$̶t̶i̶m̶e̶o̶u̶t̶(̶p̶u̶s̶h̶A̶,̶ ̶5̶0̶0̶0̶)̶.̶t̶h̶e̶n̶(̶p̶u̶s̶h̶B̶(̶)̶)̶;̶    
  $timeout(pushA, 5000).then(pushB);

而是将函数作为参数传递给 .then 方法。 $q 服务将保存这些函数以便稍后调用。

$q 服务的工作方式是将 .then 方法的参数存储为稍后调用的函数。在本例中，$q 服务存储 pushB() 返回的值，其副作用是将 B 立即插入数组。

DEMO on JSFiddle