仅当用户在页面上停留一秒钟以上时，才检索数据

Question

在AngularJS应用中，用户可以浏览多个页面。 每次显示页面时，控制器都会获取服务器以检索一些数据。

我想在启动请求之前等待1秒钟，因此如果用户迅速离开页面进入另一个视图，则我们不会加载数据。

我尝试使用$ timeout，但是即使已加载另一个视图和另一个控制器，也会执行查询。

app.controller('showController', function($scope, $routeParams, $timeout){
  $timeout(function(){
    Service.getDataDetails(id).then(function (result) {
      $scope.data = result;
    });
  },1000);
});

我也试图取消查询。 该查询在导航器中已被取消，但是服务器仍然执行它。

Answer 1

$ timeout服务具有取消方法来取消超时

var promise = $timeout(function(){
  Service.getDataDetails(id).then(function (result) {
    $scope.data = result;
  });
},1000);
//...
//somewhere else
$timeout.cancel(promise);

cancel方法将使承诺被拒绝而不是被解决。

Answer 2

在控制器的析构函数中取消$timeout ：

$scope.$on("$destroy", function handler() {
    $timeout.cancel(promise);
});

当不再使用控制器时调用它。

---

帕特里克·埃文斯（Patrick Evens）提醒我，告诉您promise变量的来源：

var promise = $timeout(function(){
    Service.getDataDetails(id).then(function (result) {
        $scope.data = result;
    });
},1000);

Answer 3

当您发出请求时，控制权转到服务器，然后仅作为响应，您才能获得视图。 因此，在准备好文档的过程中可能会超时，这不会阻止服务器调用。 为了防止服务器调用，您需要在控制器中编写代码以等待1秒，然后再发送响应。 我希望这可能会清除。

Answer 4

如果尚未向服务器发出呼叫，则取消超时应该可以。

var timer = $timeout(function(){
    Service.getDataDetails(id).then(function (result) {
      $scope.data = result;
    });
},1000);

并取消超时，如下所示：

$timeout.cancel(timer);

Answer 5

通过将其分配给变量来获取$timeout id，如下所示： var timeoutID = $timeout(...

在相同范围内的$timeout块之前，使用$timeout.cancel( timeoutID )清除超时。 这样可以确保如果用户在1000毫秒内导航到新页面，则不会执行$timeout块中的代码。