February 11, 2020

Typescript delay with async/await

2 Comments

Sometimes it is necessary in JavaScript to delay/sleep a program for a certain time. Therefore we can generate this behavior ourselves using a small helper function, thanks to the asynchronous nature of javascript.

For example:

function sleep(ms: number) {
    return new Promise(resolve =&gt;; setTimeout(resolve, ms));
}

function sleep(ms: number) {

return new Promise(resolve =>; setTimeout(resolve, ms));

}

With this we can delay the program flow for a certain time in the following function

async function delayExample() {
  //Say Hello
  console.log('Hello');
  // Say World after 2000 milliseconds
  await sleep(2000);
  console.log("World");
}

async function delayExample() {

//Say Hello

console.log('Hello');

// Say World after 2000 milliseconds

await sleep(2000);

console.log("World");

}

But it should be mentioned here that await can only be used inside an async function.

In addition a more advanced implementation is the following function

function delay(ms: number, result?: T ) {
  return new Promise(resolve =&gt;; setTimeout(() =&gt;; resolve(result), ms));
}

function delay(ms: number, result?: T ) {

return new Promise(resolve =>; setTimeout(() =>; resolve(result), ms));

}

For instance, here we can optionally create a generic, which is returned after a successful function call.

async function delayExample() {
  // Logs: "Before sleep: and the current Date"
  console.log("Before sleep: " + new Date().toString());
  //Logs after 1000 milliseconds: "After Sleep: and the current Date"
  const result: string = await delay(1000, 'After sleep: ');
  console.log(result + new Date().toString());
}

async function delayExample() {

// Logs: "Before sleep: and the current Date"

console.log("Before sleep: " + new Date().toString());

//Logs after 1000 milliseconds: "After Sleep: and the current Date"

const result: string = await delay(1000, 'After sleep: ');

console.log(result + new Date().toString());

}

For those who don’t want to implement such a help function every time themselves, there is the npm package delay which can be installed with the following command.

$ npm install delay

1	$ npm install delay

and used as follows

import * as delay from 'delay';
 
(async () =&gt;; {
    bar();
 
    await delay(100);
 
    // Executed 100 milliseconds later
    baz();
})();

import * as delay from 'delay';

(async () =>; {

bar();

await delay(100);

// Executed 100 milliseconds later

baz();

})();

https://www.npmjs.com/package/delay

Angular 11: Hot Module Replacement

Building Cross-Platform Mobile Apps with Nativescr...

Angular ViewChild – static property in ng8

Admin Admin
Developer at thecodecampus </>

2 responses to “Typescript delay with async/await”

AffiliateLabz says:

16.02.2020 at 04:56

Great content! Super high-quality! Keep it up! 🙂

horácio says:

06.04.2020 at 17:37

Estou precisando mesmo de um script desse tipo!!! vou fazer uns testes em casa, se der certo , te dou um retorno em seguida!!! muito obrigado!!!!

Typescript delay with async/await

Related Posts

2 responses to “Typescript delay with async/await”

Leave a Reply Cancel reply