如何将setTimeout与AngularJs一起使用

How to use the setTimeout with AngularJs

本文关键字：一起 AngularJs setTimeout      更新时间：2023-09-26

我有代码：

if (xxx == xxx){
    var x = 5 + 3;
    setTimeout(function() { 
        $('.regErrMsg').text("");
        $scope.errMsg = "Hi.";
    }, 5000);
}

我想执行该功能，即在5秒钟后显示"嗨"消息。那么，我的代码正确吗。截至目前，该消息尚未显示。我哪里错了？

我的问题是。。Hi执行后等待5秒，还是等待5秒后显示Hi？

让我们考虑一个简化的示例

foo();
setTimeout(function () {bar();}, 5000);
baz();

现在更容易描述将要发生的事情，一步一步（极其详细）

  1. 第1行：foo被解释
  2. ()调用foo
  3. 第2行：setTimeout得到解释
  4. 要传递到setTimeout的参数将被解释，即此处设置的函数引用
  5. (/* ... */)调用setTimeout
  6. setTimeout设置回调以在参数1毫秒后调用变量0
  7. 第3行：baz得到解释
  8. ()调用baz
  9. 文件结束。。。暂时什么事也没发生
  10. 调用参数0（来自5）
  11. 对bar进行解释（使用4中的引用）
  12. ()调用bar

截至目前，该消息尚未显示。我哪里错了？

看起来您所做的唯一更改将反映在DOM中，它是从.regErrMsg中清除文本，也许您打算使用

$('.regErrMsg').text("Hi.");

或者调用其他方法，使$scope的更新值反映在#document

中

控制器内部setTimeout的"问题"是，在调用setTimeout中的函数后，angular不会监视范围的内容。

解决方案1

您可以执行$scope.$apply()以强制更新视图，例如：

setTimeout(function() { 
    $scope.errMsg = "Hi.";
    $scope.$apply();
}, 5000);

解决方案2

它们是一个特殊的函数$timeout，它将在调用该函数后自动触发视图刷新。它具有与setTimeout相同的签名。

$timeout(function() { 
    $scope.errMsg = "Hi.";
    //You don't need $scope.$apply() here
}, 5000);

您应该将$timeout注入您的控制器

我已经删除了$('.regErrMsg').text("");，因为您不应该更改控制器内的dom。

相关文章：