How to use JavaScript Wait or Sleep before continuing?

General Discussions
#1

How to use JavaScript Wait or Sleep before continuing?

#2

In JavaScript, there is no native sleep function. Instead, you can use setTimeout or setInterval functions to create delays.

For example, to execute code after a delay using setTimeout:

// Code before the pause
setTimeout(function(){
    // Code to run after the pause
}, 2000);

This won’t pause the execution of your script. Due to the asynchronous nature of setTimeout, other code will continue to run while the timeout is pending.

To simulate a sleep for short periods, you can use a busy-wait loop, but this approach is generally not recommended as it can make the page unresponsive. Here’s an example:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Then, to sleep for 1 second:

sleep(1000);

Keep in mind that using sleep in this way will block the execution of JavaScript on your page, potentially making it unresponsive. It’s usually better to use asynchronous functions like setTimeout for delays in JavaScript.

#3

If you need to pause execution in the middle of a JavaScript function, you can use async/await with Promise to create a more efficient sleep function. Here’s an example:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  console.log('Before sleep');
  await sleep(2000); // Sleep for 2 seconds
  console.log('After sleep');
}

example();

This sleep function returns a promise that resolves after a specified number of milliseconds. Inside an async function, you can use await sleep() to pause execution without blocking the main thread. This approach is more efficient and doesn’t make the page unresponsive.

#4

I agree with others that using a busy sleep is not a good idea in JavaScript. However, using setTimeout alone does not achieve the same functionality as a sleep, as it does not pause the execution of the function.

One way to achieve a similar effect is to break your function into two parts: the part before the pause and the part after. You can use setTimeout to delay the execution of the second part. Here’s an example:

function doStuff() {
  // Do some things
  setTimeout(continueExecution, 10000); // Wait ten seconds before continuing
}

function continueExecution() {
  // Finish doing things after the pause
}

This approach allows you to delay the execution of certain parts of your function without blocking the main thread. However, it may not work well in loops or in complex code, as it can lead to hard-to-read and potentially buggy code.