using setTimeout synchronously in JavaScript

Question

I have the following scenario:

setTimeout("alert('this alert is timedout and should be the first');", 5000);
alert("this should be the second one");

I need the code after the setTimeout to be executed after the code in the setTimeout is executed. Since the code that comes after the setTimeout is not code of my own I can't put it in the function called in the setTimeout...

Is there any way around this?

Answer 1

Is the code contained in a function?

function test() {
    setTimeout(...);     

    // code that you cannot modify?
}

In that case, you could prevent the function from further execution, and then run it again:

function test(flag) {

    if(!flag) {

        setTimeout(function() {

           alert();
           test(true);

        }, 5000);

        return;

    }

    // code that you cannot modify

}

Answer 2

I came in a situation where I needed a similar functionality last week and it made me think of this post. Basically I think the "Busy Waiting" to which @AndreKR refers, would be a suitable solution in a lot of situations. Below is the code I used to hog up the browser and force a wait condition.

function pause(milliseconds) {
 var dt = new Date();
 while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

document.write("first statement");
alert("first statement");

pause(3000);

document.write("<br />3 seconds");
alert("paused for 3 seconds");

Keep in mind that this code acutally holds up your browser. Hope it helps anyone.

Answer 3

Using ES6 & promises & async you can achieve running things synchronously.

So what is the code doing?

// 1. Calls setTimeout 1st inside of demo then put it into the webApi Stack
// 2. Creates a promise from the sleep function using setTimeout, then resolves after the timeout has been completed;
// 3. By then, the first setTimeout will reach its timer and execute from webApi stack. 
// 4. Then following, the remaining alert will show up.


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

async function demo() {
  setTimeout("alert('this alert is timedout and should be the first');", 5000);
  await sleep(5000);
  alert('this should be the second one');
}
demo();

Answer 4

Just put it inside the callback:

setTimeout(function() {
    alert('this alert is timedout and should be the first');
    alert('this should be the second one');
}, 5000);

Answer 5

No, as there is no delay function in Javascript, there is no way to do this other than busy waiting (which would lock up the browser).

Answer 6

ES6 (busy waiting)

const delay = (ms) => {
  const startPoint = new Date().getTime()
  while (new Date().getTime() - startPoint <= ms) {/* wait */}
}

usage:

delay(1000)

Answer 7

You can create a promise and await for its fulfillment

const timeOut = (secs) => new Promise((res) => setTimeout(res, secs * 1000));

await timeOut(1000)

Answer 8

Here's a good way to make synchronous delay in your code:

async function yourFunction() {
  //your code
  await delay(n);
  //your code
}

function delay(n) {
  n = n || 2000;
  return new Promise(done => {
    setTimeout(() => {
      done();
    }, n);
  });
}

Found it here Right way of delaying execution synchronously in JavaScript without using Loops or Timeouts!

Answer 9

setTimeout(function() {
  yourCode();    // alert('this alert is timedout and should be the first');
  otherCode();   // alert("this should be the second one");
}, 5000);

Answer 10

I think you have to make a promise and then use a .then() so that you can chain your code together. you should look at this article https://developers.google.com/web/fundamentals/primers/promises

Answer 11

You could attempt to replace window.setTimeout with your own function, like so

window.setTimeout = function(func, timeout) {
    func();
}

Which may or may not work properly at all. Besides this, your only option would be to change the original code (which you said you couldn't do)

Bear in mind, changing native functions like this is not exactly a very optimal approach.