gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 04:11:28 27 4
gpt4 key购买 nike

在 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)

最佳答案

你试过这个吗?

            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" />

关于javascript - ng-repeat 更新实时数据时闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44318305/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com