CODEWITHSUNDEEP
angulartypescriptsleep
kha
kha

Reputation: 20033

How to implement sleep function in TypeScript?

I'm developing a website in Angular 2 using TypeScript and I was wondering if there was a way to implement thread.sleep(ms) functionality.

My use case is to redirect the users after submitting a form after a few seconds which is very easy in JavaScript but I'm not sure how to do it in TypeScript.

Upvotes: 310

Views: 824788

Answers (9)

Scholtz
Scholtz

Reputation: 3786

The correct way to do it from ES6 is

import { setTimeout } from 'timers/promises';

await setTimeout(5000);

Its the native node method now. https://nodejs.org/api/timers.html

Upvotes: 11

v-andrew
v-andrew

Reputation: 24279

You have to wait for TypeScript 2.0 with async/await for ES5 support as it now supported only for TS to ES6 compilation.

You would be able to create delay function with async:

function delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
}

And call it

await delay(1000);

BTW, you can await on Promise directly:

await new Promise(f => setTimeout(f, 1000));

Please note, that you can use await only inside async function.

If you can't (let's say you are building nodejs application), just place your code in the anonymous async function. Here is an example:

    (async () => { 
        // Do something before delay
        console.log('before delay')

        await delay(1000);

        // Do something after
        console.log('after delay')
    })();

Example TS Application: https://github.com/v-andrew/ts-template

In OLD JS you have to use

setTimeout(YourFunctionName, Milliseconds);

or

setTimeout( () => { /*Your Code*/ }, Milliseconds );

However with every major browser supporting async/await it is less useful.

Update: TypeScript 2.1 is here with async/await.

Just do not forget that you need Promise implementation when you compile to ES5, where Promise is not natively available.

PS

You have to export the function if you want to use it outside of the original file.

Upvotes: 571

FabioStein
FabioStein

Reputation: 930

import { timer } from 'rxjs';
import { take } from 'rxjs/operators';

await timer(1000).pipe(take(1)).toPromise();

this works better for me

Upvotes: 11

Tombalabomba
Tombalabomba

Reputation: 480

You can also use RxJS:

import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

async yourFunction() {
    yourCode;
    await this.delay(5000);
    yourCode;
}

delay(ms: number): Promise<any> {
    const dummyObservable = of();
    return dummyObservable.pipe(delay(ms)).toPromise();
}

Upvotes: -1

Qortex
Qortex

Reputation: 7466

With RxJS:

import { timer } from 'rxjs';

// ...

timer(your_delay_in_ms).subscribe(x => { your_action_code_here })

x is 0.

If you give a second argument period to timer, a new number will be emitted each period milliseconds (x = 0 then x = 1, x = 2, ...).

See the official doc for more details.

Upvotes: 29

Gebus
Gebus

Reputation: 281

Or rather than to declare a function, simply:

setTimeout(() => {
    console.log('hello');
}, 1000);

Upvotes: 16

Jag
Jag

Reputation: 77

If you are using angular5 and above, please include the below method in your ts file.

async delay(ms: number) {
    await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}

then call this delay() method wherever you want.

e.g:

validateInputValues() {
    if (null == this.id|| this.id== "") {
        this.messageService.add(
            {severity: 'error', summary: 'ID is Required.'});
        this.delay(3000).then(any => {
            this.messageService.clear();
        });
    }
}

This will disappear message growl after 3 seconds.

Upvotes: 1

MarmiK
MarmiK

Reputation: 5785

For some reason the above accepted answer does not work in New versions of Angular (V6).

for that use this..

async delay(ms: number) {
    await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}

above worked for me.

Usage:

this.delay(3000);

OR more accurate way

this.delay(3000).then(any=>{
     //your task after delay.
});

Upvotes: 36

kha
kha

Reputation: 20033

This works: (thanks to the comments)

setTimeout(() => 
{
    this.router.navigate(['/']);
},
5000);

Upvotes: 175

Related Questions