javascript - Angular js : Update a variable after some time

Question

我试图在从服务器获取数据时显示一些文本。我正在尝试更新变量以在固定时间后显示加载消息。但我做不到。

<div class="circularProgress" ng-if="showCircularProgress" id="circularProgress">
  <md-progress-circular md-mode="indeterminate" md-diameter="70"></md-progress-circular>
  <span>{{progressMessage}}</span>
</div>

  angular.forEach(messageArray, function(msg, i) {
    setTimeout(updateProgressMessage(msg), 1000);
  });

var updateProgressMessage = function(message){
                $scope.progressMessage=message;
            }

有人可以建议我设置延迟吗？

Answer 1

您必须使用$timeout，以便 Angular 知道在调用回调后运行摘要。您还需要将 updateProgressMessage(msg) 包装在匿名函数中，以便不会立即调用它。

angular.forEach(messageArray, function(msg, i) {
    $setTimeout(function() { updateProgressMessage(msg); }, 1000);
});

如果您想重复调用updateProgressMessage，请使用$interval，您的回调将定期调用

有关更多信息，请参阅 $interval 的文档和 $timeout

更新

如果messageArray包含多个项目，例如var messageArray = [1,2,3,4,5] 那么上面的代码将为每个项目创建一个超时，每个项目将在大约 1 秒后大致相同的时间触发。

我不确定这是否是您所追求的行为，并且我认为您会想要这样的行为。

var messageArray = [1,2,3,4,5];

var intervalPromise = null;

intervalPromise = $setInterval(function() {
    if (messageArray.length > 1){
        // remove an item from the messageArray and update the progress message  
        updateProgressMessage(messageArray.shift()); 
    } else {
        // no more update messages
        $interval.cancel(intervalPromise);
    }
}, 1000);

var updateProgressMessage = function(message){
    $scope.progressMessage = message;
};

这将创建一个间隔并每秒(大约)触发一次。一旦处理完所有消息，该间隔就会被取消，以防止进一步执行。