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