使用Angular在页面加载延迟后调用函数

Call function after delay on page load using Angular

本文关键字：延迟 调用 函数 加载 Angular 使用      更新时间：2023-09-26

我试图在加载页面后调用Angular 2.5中的一个函数，以查看表单字段是否已自动填充。该函数正在被调用，但由于某种原因，只有在我从字段中导航、更改选项卡、最小化浏览器等情况下才会调用。我怎么能做到这一点，而不要求用户做任何这些动作(即它被称为2.5秒后页面加载无论什么)。我在下面尝试了两种不同的实现，但它们的行为方式相同。

方法1:

var timer=false;
$scope.$watch('email', function(){
    if(timer){
         $timeout.cancel(timer)
}
    timer= $timeout(function(){
        $scope.emailChanged();
    }, 250)
});
方法2:

<div class="form-managed" ng-init="load()"></div>
$scope.load = () => {
    setTimeout(() => {
            $scope.emailChanged();
    }, 2500);
 };
更新:

从注释我改变代码使用$timeout代替我的其他实现。我还验证了该函数在任何实现中都被调用，但是当我试图提取它时，该字段的值仍然显示为空。当前代码如下。

$timeout(() => {
    debugger;
    var thisEmail = document.getElementById("buyerEmail");
    $scope.emailChanged();
}, 5000);

输入字段:

<input type="email" class="form-control input-lg" name="email" id="buyerEmail" placeholder="Email address" autocomplete="email" ng-model-options="{updateOn: 'blur'}" ng-change="emailChanged($event)" required />

你添加的延迟长度没有关系。如果你从代码中填充了email输入的值，Angular不会看到这个变化。这就是为什么只有当你调整大小或做一些其他迫使Angular处理页面的改变时，你才会看到变化的反映。

虽然您没有显示它，但我假设您在某处有一些代码来分配电子邮件值。比如:

$("txtEmail").val(myEmailVariable);

改成:

$timeout(function () {
  $("txtEmail").val(myEmailVariable);
});
相关文章：