Call function after delay on page load using Angular

Question

I am trying to call a function in Angular 2.5 seconds after a page loads to see if a form field has been autofilled. The function is being called but for some reason is only called if I navigate away from the field, change the tab, minimize the browser, etc. How can I accomplish this without requiring the user to do any of these actions (i.e. it is called 2.5 seconds after page load no matter what). I have two different implementations I have tried below but they behave the same way.

Method 1:

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

Method 2:

<div class="form-managed" ng-init="load()"></div>

$scope.load = () => {
    setTimeout(() => {
            $scope.emailChanged();
    }, 2500);
 };

Update:

From comments I changed the code to use $timeout instead of my other implementations. I also verified that the function is being called in any of the implementations however the value of the field still shows as null when I try to extract it. Current code below.

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

Input field:

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

put a simple console.log into the function and you will see, that it is called — webdeb
– webdeb, Commented Jul 1, 2016 at 20:49
Timeout in first is only 250ms. And why is it inside watch email? — Arg0n
– Arg0n, Commented Jul 1, 2016 at 21:00
You're right webdeb it does appear that it is being called but stepping through the function the value that is entered in the form is not being recorded. Any idea how to resolve that? — thurmc
– thurmc, Commented Jul 1, 2016 at 21:02
Arg0n, typo. It is 2500 in code like the second method shows — thurmc
– thurmc, Commented Jul 1, 2016 at 21:04
This is not what ng-nit is for. Call function in controller — charlietfl
– charlietfl, Commented Jul 1, 2016 at 21:05

Cobus Kruger · Accepted Answer · 2016-07-01 21:45:53Z

2

It doesn't make a difference how long the delay is that you add. If you populated the value of your email input from code, Angular doesn't see the change. This is why you only see the change reflected once you resize or make some other change that forces Angular to process the page.

While you didn't show it, I assume you have some code somewhere to assign the email value. Something like this, perhaps:

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

Change it to this:

$timeout(function () {
  $("txtEmail").val(myEmailVariable);
});

answered Jul 1, 2016 at 21:45

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thurmc Over a year ago

Got it. Thanks for your help :)

Collectives™ on Stack Overflow

Call function after delay on page load using Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related