AngularJS:一个接一个地听事件

AngularJS: Listen to events, one after the other

本文关键字：一个 事件 AngularJS      更新时间：2023-09-26

是否有一个角的方式来监听一个接一个发生的事件?例如，我想在$rootScope上监听$routeChangeSuccess和$viewContentLoaded事件。当第一个事件发生后，第二个事件发生，我想调用一个回调。

这可能吗?还是我得自己写?如果事件的顺序重要或不重要，那么进行配置也会很好。或者有什么想法，如何实现这样的行为?

因为我没有在网上找到任何东西，我想出了我自己的解决方案。我认为它有效，但我不知道这种方法是否有任何缺点。

有什么建议如何将这个全局集成到AngularJS项目中吗?或者作为一个更低的组件?我应该将函数附加到作用域，还是附加到rootScope?任何帮助都是感激的!

以下是Plunker链接和代码:http://plnkr.co/edit/slfvUlFCh7fAlE4IPt8o?p=preview

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.events = [];
  var successiveOn = function(events, eventScope, callback, orderImportant) {
    // array for the remove listener callback
    var removeListenerMethods = [];
    // events array that is passed to the callback method
    var eventsArr = [];
    // how many events are fired
    var eventCount = 0;
    // how many events should be fired
    var targetEventCount = events.length;
    // track the next event, only for orderImportant==true
    var nextEvent = events[0];
    // iterate over all event strings
    for (var i = 0; i < events.length; i++) {
      var event = events[i];
      // attach an $on listener, and store the remove listener function
      var removeListener = eventScope.$on(event, function(evt) {
        if (evt.name == nextEvent || !orderImportant) {
          ++eventCount;
          nextEvent = events[eventCount];
          eventsArr.push(evt);
          // if all events has fired, call the callback method and reset
          if (eventCount >= targetEventCount) {
            callback(eventsArr);
            nextEvent = events[0];
            eventCount = 0;
            eventsArr = [];
          }
        }
      });
      removeListenerMethods.push(removeListener);
    }
    // the return function is a anonymous function which calls all the removeListener methods
    return function() {
      for (var i = 0; i < removeListenerMethods.length; i++) {
        removeListenerMethods[i]();
      }
    }
  }
  // order is unimportant
  var removeListeners = successiveOn(["orderUnimportant1", "orderUnimportant2", "orderUnimportant3"], $scope, function(events) {
    var str = "Events in order of trigger: ";
    for (var i = 0; i < events.length; i++) {
      str += events[i].name + ", ";
    }
    $scope.events.push(str);
  }, false);
  $scope.$broadcast("orderUnimportant1");
  $scope.$broadcast("orderUnimportant2");
  $scope.$broadcast("orderUnimportant3"); // Events were triggered 1st time
  $scope.$broadcast("orderUnimportant3");
  $scope.$broadcast("orderUnimportant2");
  $scope.$broadcast("orderUnimportant1"); // Events were triggered 2nd time, order doesn't matter
  removeListeners();
  // order is important!
  var removeListeners = successiveOn(["OrderImportant1", "OrderImportant2", "OrderImportant3"], $scope, function(events) {
    var str = "Events in order of trigger: ";
    for (var i = 0; i < events.length; i++) {
      str += events[i].name + ", ";
    }
    $scope.events.push(str);
  }, true);
  $scope.$broadcast("OrderImportant1");
  $scope.$broadcast("OrderImportant2");
  $scope.$broadcast("OrderImportant3"); // Events were triggered
  $scope.$broadcast("OrderImportant1");
  $scope.$broadcast("OrderImportant3");
  $scope.$broadcast("OrderImportant2"); // Events were NOT triggered
  removeListeners();
});

使用$q服务，即promise。

var routeChange = $q.defer();
var contentLoaded = $q.defer();
$rootScope.$on("$routeChangeSuccess", function() {
  routeChange.resolve();
});
$rootScope.$on("$viewContentLoaded", function() {
  contentLoaded.resolve();
});
$q.all([contentLoaded.promise, routeChange.promise]).then(function() {
  //Fire your callback here
});
特定顺序:

routeChange.then(function() {
  contentLoaded.then(function () {
     //Fire callback
  });
});

没有讨厌的回调汤:

var routeChangeHandler = function() {
  return routeChange.promise;
}
var contentLoadedHandler = function() {
  return contentLoaded.promise
}
var callback = function() { 
  //Do cool stuff here
}
routeChangeHandler
  .then(contentLoadedHandler)
  .then(callback);

真他妈的性感…

关于链式承诺的更多信息

我认为Stens的答案是解决这个问题的最好方法，如果你想用纯AngularJS工具来做的话。然而，这种情况往往表明您必须定期处理更复杂的事件。如果是这样的话，我建议你看看Reactive Extensions和rx.angular.js桥接库。

使用响应式JavaScript扩展(RxJS)，你可以简化代码如下:

Rx.Observable.combineLatest(
    $rootScope.$eventToObservable('$routeChangeSuccess'),
    $rootScope.$eventToObservable('$viewContentLoaded'),
    Rx.helpers.noop
)
.subscribe(function(){
    //do your stuff here
})
相关文章：