Angular 4 setTimeout does not wait

Question

I am creating an angular 4 app with typescript.

I'm having a function that needs to be executed every 10 seconds untill a specified stopcondition. I created a loop with some testcode using setTimeout to see if it would work.

My Testcode:

public run() {
    let i = 0;
    while (i < 4) {
        setTimeout(this.timer,3000);
        i++;
    }
}

public timer(){
    console.log("done")
}

However this seems to wait for 3 seconds, or browser is just slow... and then it prints 4 times done. So the code isn't working. Am I doing this wrong or are there other possibilities to do this kind of things?

Saravana · Accepted Answer · 2017-07-12 12:20:47Z

34

Since you are using Angular you can probably do this in a much simpler way using takeWhile:

Observable.interval(10000)
    .takeWhile(() => !stopCondition)
    .subscribe(i => { 
        // This will be called every 10 seconds until `stopCondition` flag is set to true
    })

answered Jul 12, 2017 at 12:20

Saravana

41k20 gold badges110 silver badges112 bronze badges

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

3 Comments

fangio Over a year ago

when I try this I get an error: ERROR TypeError: WEBPACK_IMPORTED_MODULE_3_rxjs_Observable.Observable.interval is not a function

fangio Over a year ago

That's ridiculous I imported { Observable } from rxjs/Observable, that did not work...Thank you for the answer :)

JB Nizet Over a year ago

@fangio don't ever import from "rxjs". That will import all the Observable static methods and operators, which will make your application bundle way bigger than it should be. Use the import you had, and add import 'rxjs/add/observable/interval'; import 'rxjs/add/operator/takeWhile';`. That will only import the methods and operators that you actually use.

JB Nizet · Accepted Answer · 2017-07-12 12:16:40Z

6

Yes, you're doing it wrong: you have a loop telling 4 times in a row to execute timer() 3 seconds later, from now.

To do what you want, you would have to reschedule the next timer each time timer() is called, or, more simply, to use setInterval():

let count = 0;
const interval = window.setInterval(() => {
    this.timer();
    count++;
    if (count >= 4) {
        window.clearInterval(interval);
    }
}, 3000);

Note that, since you're using angular, using observables would be muuuch easier:

Observable.interval(3000).take(4).subscribe(() => this.timer());

answered Jul 12, 2017 at 12:16

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

4 Comments

Poul Kruijt Over a year ago

Just for my own reference, how can you make the Observable interval stop if a certain condition has been met. For instance when a class field becomes true

JB Nizet Over a year ago

takeWhile(() => !this.someField)

Poul Kruijt Over a year ago

Lovely! It's like they have a solution for everything :)

Michael W. Czechowski Over a year ago

@JBNizet Could you please show how to import the libraries correctly?

Günay Gültekin · Accepted Answer · 2019-08-20 14:02:48Z

6

I did it with Angular 6. This code requests every 5 seconds to get the progress of rendering. It will stops sending request when the progress reaches %100.

import {interval} from "rxjs";

getProgress(searchId): void{
const subscription = interval(5000)
  .subscribe(()=>{
    //Get progress status from the service every 5 seconds
    this.appService.getProgressStatus(searchId)
      .subscribe((jsonResult:any)=>{
          //update the progress on UI 

          //cancel subscribe until it reaches %100
          if(progressPercentage === 100)
            subscription.unsubscribe();
        },
        error => {
          //show errors
        }
      );
  });
}

edited Aug 20, 2019 at 14:02

answered Jul 13, 2018 at 17:18

Günay Gültekin

4,8218 gold badges35 silver badges37 bronze badges

Comments

Poul Kruijt · Accepted Answer · 2018-05-07 06:19:47Z

3

This is indeed not the way to use an async method. The while loop just goes 4 times through it in one go, and initiate the 4 timers. Which will output simultaneously as well in 3 seconds. You can however leverage the await and async functionality from TypeScript:

public stopCondition: boolean = false;

public async run(): Promise<void> {
    while (!this.stopCondition) {
       await new Promise<void>(resolve => {
           setTimeout(resolve, 10000);
       });
       this.execute();
    }
    console.log('done');
}

public execute(): void {
    if ('whatever should trigger your stop condition') {
       this.stopCondition = true;
    }
}

This will run the execute method after every 10 seconds, for as long as the stopCondition === false. When the stopCondition === true it will output done.

edited May 7, 2018 at 6:19

answered Jul 12, 2017 at 12:15

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

2 Comments

Kirk Over a year ago

This worked for me. I had to remove "void" as not supported ES5 for an async function. But the above approach worked. Thank you for taking time to contribute this.

Poul Kruijt Over a year ago

@Kirk my bad indeed. Should be Promise<void> for typescript, and ES5 does not support typings, so you should remove it :)

Stephen Rauch · Accepted Answer · 2018-05-22 01:57:35Z

2

Use the function setInterval(hander:(args:any[]),ms:Number,args:any[]) which is one of the methods of OnInit.

setInterval(a=>{
  alert("yes....");
},10000,[]);

Will show alert "yes" after 10 secs.

edited May 22, 2018 at 1:57

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered May 22, 2018 at 1:37

srlgrg

714 bronze badges

1 Comment

Gel Over a year ago

have you tried this inside an angular fucntion that toggles a boolean attribute? Doesnt seem to work on mine...

VadimB · Accepted Answer · 2017-07-12 12:15:27Z

0

Yes, it is correct behavior. You have synchronous loop which created 4 delayed actions and ends this loop. It happens in few milliseconds. So all 4 delayed actions are registered to be started in 3 seconds, about at same time.

So in 3 secs you will receive all 4 responses from this delayed actions.

If you want to have consequence call execution (first after 3 sec, then second after first) consider to use promises for this and call new promise withh 3 second delay after previous completion.

fisrtPromise
   .then(secondPromise)
   .then(thirdPromise);

https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise

answered Jul 12, 2017 at 12:15

VadimB

5,7213 gold badges39 silver badges49 bronze badges

Comments

Prathmesh Dali · Accepted Answer · 2017-07-12 12:36:24Z

0

Since you are calling setTimeout inside while loop and because of asynchronous execution of statements it will not wait to execute Timer function before going to next iteration. You can achieve required functionality by using below code

public run() {
    var i = 0;
    var interval = setInterval(() => {
        if (++i === 4) {                
            clearInterval(interval);
        }
        else {
            this.timer();
        }
    }, 3000);

}

public timer() {
    console.log("done")
}

answered Jul 12, 2017 at 12:36

Prathmesh Dali

2,3601 gold badge20 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular 4 setTimeout does not wait

7 Answers 7

3 Comments

4 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

4 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related