如何在事件广播时终止Timeout延迟内的Intervals？

你现在在Angular 1.5项目里，登录后通过多个指令用$timeout延迟启动$interval做轮询任务（比如邮件通知检查），而且已经做了基础的清理工作——监听全局事件和指令销毁事件来停止定时器，这一步已经考虑到了内存泄漏的风险，做得不错！不过分散在各个指令里的重复逻辑其实可以更优雅地管理，我给你几个优化方案：

首先先贴一下你给出的现有代码片段，方便对照：

var intervalPromise; 
$timeout(function () { 
  stopInterval(); 
  intervalPromise = $interval(function() { 
    checkNewEmail(); 
  }, 30000); 
}, 20000); 

$scope.$on('event:stop-intervals', function() { 
  stopInterval(); 
}); 

$scope.$on('$destroy', function() { 
  stopInterval(); 
}); 

function stopInterval() {
  if (intervalPromise) {
    $interval.cancel(intervalPromise);
    intervalPromise = null;
  }
}

1. 封装定时器管理服务，复用逻辑 #

把定时器的创建、延迟启动、清理逻辑全部封装成一个专门的服务，这样所有指令都能复用，不用每个指令都写一遍重复的监听和取消代码：

angular.module('yourApp').factory('IntervalManager', ['$interval', '$timeout', function($interval, $timeout) {
  // 维护所有活跃的定时器Promise，方便全局统一管理
  var activeIntervals = [];

  return {
    // 创建延迟启动的轮询定时器，返回清理函数
    createDelayedInterval: function(callback, intervalDelay, startDelay) {
      var timeoutPromise;
      var intervalPromise;

      // 启动延迟定时器
      timeoutPromise = $timeout(function() {
        intervalPromise = $interval(callback, intervalDelay);
        activeIntervals.push(intervalPromise);
      }, startDelay);

      // 返回清理当前定时器的函数
      return function cleanup() {
        // 取消未触发的延迟定时器
        if (timeoutPromise) {
          $timeout.cancel(timeoutPromise);
          timeoutPromise = null;
        }
        // 取消正在运行的轮询定时器
        if (intervalPromise) {
          $interval.cancel(intervalPromise);
          // 从活跃列表中移除
          var index = activeIntervals.indexOf(intervalPromise);
          if (index !== -1) {
            activeIntervals.splice(index, 1);
          }
          intervalPromise = null;
        }
      };
    },
    // 全局停止所有活跃的轮询定时器
    stopAllIntervals: function() {
      activeIntervals.forEach(function(promise) {
        $interval.cancel(promise);
      });
      activeIntervals = [];
    }
  };
}]);

在指令中使用这个服务 #

这样你的指令代码会简洁很多，不用再写重复的监听和清理逻辑：

angular.module('yourApp').directive('userEmailNotifications', ['IntervalManager', function(IntervalManager) {
  return {
    controller: ['$scope', function($scope) {
      // 用服务创建延迟启动的邮件检查轮询
      var cleanupEmailInterval = IntervalManager.createDelayedInterval(checkNewEmail, 30000, 20000);

      // 指令销毁时清理当前定时器
      $scope.$on('$destroy', cleanupEmailInterval);

      // 监听全局停止事件，清理当前定时器
      $scope.$on('event:stop-intervals', cleanupEmailInterval);

      function checkNewEmail() {
        // 你的新邮件检查逻辑
        console.log('Checking for new emails...');
      }
    }]
  };
}]);

2. 全局统一控制定时器 #

如果需要在用户登出或者其他全局场景下停止所有轮询任务，直接调用服务的stopAllIntervals()方法即可，不用再逐个指令触发事件：

// 比如在登出控制器里
$scope.logout = function() {
  // 停止所有轮询定时器
  IntervalManager.stopAllIntervals();
  // 其他登出逻辑...
};

3. 额外注意事项 #

• 每次创建新定时器前先清理旧的：就像你原代码里的stopInterval()那样，避免同一个任务重复启动多个轮询，浪费资源。
• 务必在指令销毁时清理：不管用服务的清理函数还是手动处理，都要确保指令销毁后定时器也被取消，防止内存泄漏。
• 合理设置轮询间隔：根据业务需求调整$interval的间隔，避免过于频繁的请求给服务器造成压力。

内容的提问来源于stack exchange，提问作者Neel