仅当使用 AngularJS 从服务器中找到新数据时，才自动刷新数据

Auto refresh data only when new data is found from the server with AngularJS

本文关键字：数据 刷新 新数据 AngularJS 服务器      更新时间：2023-09-26

我是AngularJS的新手，并且有一个关于仅在从服务器检索新数据时才刷新页面的快速问题。

我已经搜索了周围，但找不到与我的问题类似的任何内容。

我有一个服务和控制器，其间隔承诺如下：

我的服务

angular.module('MyService', ['ngResource']).
    factory('Data', function($resource){
      return $resource('rest/getMyData', {});
});

我的控制器

function MyController($scope,$interval,$http, Data) {
    $scope.refresh = function() {
        $scope.jobs = Data.query();
    };
    $scope.intervalPromise = $interval(function(){
          $scope.refresh();
    }, 10000);  
    // initial load of data
    $scope.refresh();
}

每 10 秒从服务器成功检索一次数据，但我希望页面仅在找到新数据时才刷新。

如果能有正确的方向，将不胜感激。

您可以将从服务器接收的数据与当前数据集（$scope.jobs）进行比较，并且仅在它们不同时才更新$scope.jobs。

function MyController($scope,$interval,$http, Data) {
    $scope.refresh = function() {
        var serverData = Data.query();
        if( serverData !== $scope.jobs ) {
            $scope.jobs = serverData;
        }
    };
    $scope.intervalPromise = $interval(function(){
          $scope.refresh();
    }, 10000);  
    // initial load of data
    $scope.refresh();
}
我想

我已经找到了一个有效的解决方案。

瑞安的回答对我也不起作用。经过一番挖掘后，它似乎不能正常工作，因为 Data.query（） 操作需要很短的时间才能返回 - 而且在if(...)进行比较时它还没有完成 - 所以刷新总是被调用（屏幕只是每十秒"闪烁"一次，因为它刷新到相同的数据）。

要修复它，您需要添加延迟 setTimeout() .

function MyController($scope,$interval,$http, Data) {
  $scope.refresh = function() {
      var serverData = Data.query();
      setTimeout(function(){
            if (serverData !== $scope.jobs){
               $scope.jobs = serverData;
            }
      }, 100);
  };
  $scope.intervalPromise = $interval(function(){
      $scope.refresh();
  }, 10000);  
  // initial load of data
  $scope.refresh();
}

无论如何，这对我有用 - 所以如果有人仍然遇到困难，它可能会很有用。

相关文章：