在 AngularJS 中停止 $timeout 更新

Question

我有 2 个控制器，都使用相同的更新方法来获取数据：

angular.module('project')
  .controller('mainController', function($http, $scope, $timeout, $sce) {
      updateData($http, $scope, $timeout, $sce, false);
  })

  .controller('settingsController', function($http, $scope, $timeout, $sce) {

      updateData($http, $scope, $timeout, $sce, true);          
  })

我的updateData 看起来像这样：

function updateData($http, $scope, $timeout, $sce, settings) {
    $timeout(function() {
        if (settings) {

            getSettings($http, $scope);
        }
        else {
            getDataA($http, $scope);
            getDataB($http, $scope);
        }
        updateData($http, $scope, $timeout, $sce, settings);
    }, 1000);
}

现在刷新主页时（使用mainController）我总是收到“空”消息，因为该过程没有完成所有方法调用，并且当切换到另一个站点时（使用settingsController）加载需要很长时间这是因为必须先完成前一个请求的所有请求。刷新/切换站点时如何直接“杀死”所有待处理的更新？

Answer 1

1. 这个实现是错误的。我认为将依赖项传递给打开的函数并使用它们不是一个好主意。这可能会产生难以检测的错误。

2. 您的updateData 函数是资源杀手。它每秒重复一次，没有限制或控制。

您的代码中存在设计问题。您应该重新考虑以标准和有效的方式设计它。

您的问题的答案是 $timeout 返回一个承诺。您可以使用 $timeout.cancel 方法取消超时。

var timeoutPromise = $timeout(foo(), 1000);

$timeour.cancel(timoeoutPromise); 

Answer 2

你应该做一个服务而不是函数。那么你需要将服务注入到控制器中。

project.service('updateService', function(){
    ...some logic here...
});

然后注入：

angular.module('project')
 .controller('mainController', function($http, $scope, $timeout, $sce, updateService) {
        ...use "updateService" methods here...
})

而当你写一个控制器时，一个小技巧，这样写：

angular.module('project')
 .controller('someController', ['$scope', function($scope){

}];

当您想要制作代码的缩小版本时，这很重要。