How to set time delay in JavaScript

JavaScript is a scripting language and scripting languages are always synchronous and single-threaded. While in a specific case, it might be nice to have the whole engine wait for a few seconds, in general it is bad practice. But, it's perfectly reasonable to want to perform an action, wait, and then perform another action in JavaScript. Well, there are different functions and methods that help you to achieve this task in JavaScript.
How to Sleep/Wait/Delay in Code Execution | JavaScript

Javascript setTimeout()

The first and the most common method in implementing a delay in the execution of a JavaScript code is to use the setTimeOut() method.
setTimeout( function , delay in ms)
  1. functionname - The function name for the function to be executed.
  2. milliseconds - The number of milliseconds.
run this source code Browser View

Full Source | JavaScript
var delayInMilliseconds = 5000; //4 second console.log('Waiting for 5 sec...') setTimeout(function() { console.log('code to be executed after 5 second...') }, delayInMilliseconds);

Javascript setInterval()

Javascript setTimeout executes only once after the delay whereas setInterval() keeps on calling the callback function after every delay milisecs. Both these methods returns an integer identifier that can be used to clear them before the timer expires. The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.
setInterval(function, milliseconds);
  1. functionname - The function name for the function to be executed.
  2. milliseconds - The number of milliseconds.
run this source code Browser View

Full Source | JavaScript
var intervalID = setInterval(function(){ //called 5 times each time after one second //before getting cleared by below timeout. console.log("Calling after every 1 second"); },1000); //delay is in milliseconds
setTimeout(function(){ clearInterval(intervalID); //clear above interval after 5 seconds console.log('This code to be executed after 5 second...') },5000);
Output:
Program start here.... Calling after every 1 second Calling after every 1 second Calling after every 1 second Calling after every 1 second Calling after every 1 second This code to be executed after 5 second...

Javascript sleep()

JavaScript has evolved significantly. You can use some approaches for simulating the sleep() function in JavaScript. The features such as promises and async/await function in JavaScript helped us to use the sleep() function in an easier way.
sleep(Time in ms).then(() => { //// code })

Or as a one-liner:

await new Promise(r => setTimeout(r, 2000));

Or

const sleep = ms => new Promise(r => setTimeout(r, ms));
The sleep() function can be used along with the async/await to get the pause between the execution. example
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function demo() { for (let i = 0; i < 5; i++) { console.log("Waiting ${i} seconds..."); await sleep(i * 1000); } console.log('Done'); } demo();
Output:
Waiting 1 seconds... Waiting 2 seconds... Waiting 3 seconds... Waiting 4 seconds... Done





Related Topics
  1. JavaScript Popup Boxes
  2. Opening a new window in JavaScript
  3. How to Create Drop-Down Lists in JavaScript
  4. How do I include a JavaScript file in another JavaScript file?
  5. Print the content of a Div using JavaScript/jQuery
  6. How to get the current URL using JavaScript ?
  7. How to Detect a Mobile Device with JavaScript/jQuery
  8. How to validate an email address in JavaScript
  9. JavaScript Array Iteration
  10. How to Remove a Specific Item from an Array in JavaScript
  11. What is JavaScript closures?
  12. How To Remove a Property from a JavaScript Object
  13. How to get selected value from Dropdown list in JavaScript
  14. How do I get the current date in JavaScript?
  15. How to Open URL in New Tab | JavaScript
  16. How to round to at most 2 decimal places | JavaScript
  17. How to convert string to boolean | JavaScript
  18. How to check undefined in JavaScript?
  19. How To Copy to Clipboard | JavaScript
  20. How to encode a URL using JavaScript?
  21. How to force Input field to enter numbers only | JavaScript
  22. How to create multiline string in JavaScript
  23. How to Check for an Empty String in JavaScript?