Why does alert(); run before console.log();

Question

How My Question is Different From Others

I am using ES6 syntax. The other questions I looked at uses ES5 syntax.

The Question

Why does alert(); run before console.log();? And can I make it so that console.log(); is executed before alert();?

My Code

console.log("Hello!");
alert("Hi!");

Wirewove

console.log might be implemented to run asynchronously, it depends on the environment you are running on – Hydrostatics

Can you translate asynchronously to English please? – Wirewove

I mean "asynchronous" or "async" – Hydrostatics

Oh okay, so what environment should I be running this code on? – Wirewove

There is no right answer to this question, maybe I should ask which environment you are currently running on, and find a solution on that environment – Hydrostatics

console.log("Hello!"); setTimeout(() => alert("Hi!"), 0); – Chincapin

I am using Repl.it to run my code. – Wirewove

@Chincapin Thanks for the code. Can you put that as an answer though? – Wirewove

Answer 1

console.log("Hello!");
setTimeout(() => alert("Hi!"), 0);

Basically: console.log() is being called first, technically.^† However, the browser actually repainting itself or the console updating also takes a moment. Before it can update itself though, alert() has already triggered, which says "stop everything before I'm confirmed". So the message to console.log is sent, but the visual confirmation isn't in time.

Wrapping something in a 0 second setTimeout is an old trick of telling JavaScript "hey call me immediately after everything is finished running & updating."

---

† You can verify this by doing something like console.log(new Date().toString()); before the alert dialog, then waiting a few minutes before closing the alert. Notice it logs the time when you first ran it, not the time it is now.

Chincapin

How can I make alert(); come after 5 seconds? – Wirewove

@Wirewove If you want that, then you'd just use a setTimeout but, well, for it's intended use - not as this hacky side-effect thing we're doing above. So change it to setTimeout(() => alert("Hi!"), 5000); (The second argument to setTimeout is the number of milliseconds to wait before executing.) – Chincapin

Oh, I thought that number was in seconds. Thanks anyway. – Wirewove

Wrapping the alert in a 0 ms setTimeout did not work for me. I also tried "awaiting next tick" (implementation depends on your framework) and that didn't work either. However, wrapping the alert in a 1 ms setTimeout worked. – Clipfed

Answer 2

Check test below, which will return from function on 999 cycle of for loop before window.alert function fires. In my case I did not see window.alert. This is because actually alert runs after loop of console.log's functions.

// Test function
const test = (br) => {
  for (let i = 0; i < 1000; i++) {
    console.log(i);
    // If br true and cycle #999 - return before
    // loop end and window.alert exec
    if(br && i === 999) return;
  }
  window.alert('Hello World!');
};

// Test
test(true);

Handclasp