javascript - ng-repeat 更新实时数据时闪烁

Question

在 angular.js 1.x 中的以下代码中，我需要创建一个仪表板数据集，每隔几秒调用一次并更新 dom。然而它闪烁是因为我认为 $scope.DOMdataArray = []

我已经尝试过通过 $index 进行跟踪，但没有帮助。有没有办法解决这个问题或者编写代码让 ng-repeat 生成的 DOM 不闪烁？

function someDataInterval () {
    $scope.DOMdataArray = []
    _.map(urlsArray,function(url) {
        $http.get(url).then(function(res) {
           // some work on response 
           $scope.DOMdataArray.push(/*some data for ng-repeat*/)
        }) 
    })
}
someDataInterval ()
setInterval(someDataInterval,5000)

Answer 1

你试过这个吗？

            function someDataInterval () {
                _.map(urlsArray,function(url) {
                    $http.get(url).then(function(res) {
                       // some work on response 
                       $scope.DOMdataArray = [];
                       $scope.DOMdataArray.push(/*some data for ng-repeat*/)
                    }) 
                })
            }
            someDataInterval ()
            setInterval(someDataInterval,5000)

如果这不起作用，您可以随时使用一个小的加载图标，这样就看不到闪烁。使用 ng-show 显示列表。

            function someDataInterval () {
                $scope.loading = true;
                _.map(urlsArray,function(url) {
                    $http.get(url).then(function(res) {
                       // some work on response 
                       $scope.DOMdataArray = [];
                       $scope.DOMdataArray.push(/*some data for ng-repeat*/)
                       $scope.loading = false;
                    }) 
                })
            }
            someDataInterval ()
            setInterval(someDataInterval,5000)

和 HTML:

      <h1 ng-show="!loading" ng-repeat="x in DOMdataArray">{{x.name}}</h1>
      <img ng-show="loading" src="img/image-loading.gif" />