angularjs – 使用$timeout时承诺链接

前端之家收集整理的这篇文章主要介绍了angularjs – 使用$timeout时承诺链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力了解承诺API和链接,特别是当$timeoutis与.then()一起使用的时机.从以下我预期的是,由于$timeout返回一个承诺,.then()将不会被调用,直到它已经解决.

但是ABAB一直是ABBA.

在执行.then()之前,如何使用promise API来确保长时间运行的调用(或使用$timeout的延迟调用)实际完成?

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>

我已经设置了一个小提琴:https://jsfiddle.net/kan3c61t/

不要调用.then方法中的函数.
$q.when(pushA()).then(pushB);
  //$q.when(pushA()).then(pushB());

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

而是将函数作为参数传递给.then方法. $q服务将保留稍后调用功能.

$q服务的工作方式是将.then方法的参数存储为稍后调用函数.在这种情况下,$q服务正在存储由pushB()返回的值,其副作用是立即将B推送到数组上.

DEMO on JSFiddle

猜你在找的Angularjs相关文章