Javascript settimeout promise or in promise chain

In This Javascript and Node.JS Tutorial, we are going to learn about How to wrap settimeout in promises or using settimeout in promise chain in Javascript or Node.js. Thanks to latest ES6 feature updates, it’s very easy to implement.

There can be multiple use cases for this,

  • You may want wait for some time when you’re making synchronous http calls
  • Quering data from database
  • waiting for some other asynchronous function call
  • etc

for example we will consider following example,

makeHttpCall("https://api.stackfame.com/1")
  .then(function(data) {
    return makeHttpCall("https://api.stackfame.com/2");
  })
  .then(function(data) {
    return loadScript("https://api.stackfame.com/3");
  })
  .then(function(data) {
    // do something useful with data
  });

So in the above promise chain, may be you want to introduce delay between http calls.

makeHttpCall("https://api.stackfame.com/1")
  // add delay here
  .then(function(data) {
    return makeHttpCall("https://api.stackfame.com/2");
  })
  // add delay here
  .then(function(data) {
    return loadScript("https://api.stackfame.com/3");
  })
  .then(function(data) {
    // do something useful with data
  });

Article Contents

Using Promise Function to add settimeout to promise chain

We can wrap settimeout in promise to add settimeout in promise using following function.

const delay = time => new Promise(resolve => setTimeout(resolve, time));

So the above example will be

const delay = time => new Promise(resolve => setTimeout(resolve, time));

makeHttpCall("https://api.stackfame.com/1")
  // add delay here
  .then(delay(10000))
  .then(function(data) {
    return makeHttpCall("https://api.stackfame.com/2");
  })
  // add delay here
  .then(delay(5000))
  .then(function(data) {
    return loadScript("https://api.stackfame.com/3");
  })
  .then(function(data) {
    // do something useful with data
  });

We can further improve this promise chain using es6 arrow functions

const delay = time => new Promise(resolve => setTimeout(resolve, time));

//   using es6 arrow functions
makeHttpCall("https://api.stackfame.com/1")
  // add delay here
  .then(delay(4000))
  .then(data => makeHttpCall("https://api.stackfame.com/2"))
  // add delay here
  .then(delay(2000))
  .then(data => loadScript("https://api.stackfame.com/3"))
  .then(
    data => console.log(data)
    //do something useful with data
  );

Using Promise Prototype to Add settimeout to promise

We can also add delay to promise prototype object to introduce delay in promise chain.

Promise.prototype.delay = time =>
  new Promise(resolve => setTimeout(resolve, time));

And we can use this in our examples as

Promise.prototype.delay = time =>
  new Promise(resolve => setTimeout(resolve, time));

makeHttpCall("https://api.stackfame.com/1")
  // add delay here
  .delay(4000)
  .then(data => makeHttpCall("https://api.stackfame.com/2"))
  // add delay here
  .delay(5000)
  .then(data => loadScript("https://api.stackfame.com/3"))
  .then(
    data => console.log(data)
    //do something useful with data
  );

So this all regarding Javascript using settimeout promise chain.
You can view Full code in Github Gist: link

See also  auto-refresh page once only after first load - Using JavaScript / JQuery

Leave a Comment