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!");

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!");

• javascript
• console.log
• alerts

• 4 console.log might be implemented to run asynchronously, it depends on the environment you are running on – AngYC Commented Nov 5, 2017 at 22:11
• Can you translate asynchronously to English please? – SantaticHacker Commented Nov 5, 2017 at 22:12
• I mean "asynchronous" or "async" – AngYC Commented Nov 5, 2017 at 22:13
• Oh okay, so what environment should I be running this code on? – SantaticHacker Commented Nov 5, 2017 at 22:14
• 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 – AngYC Commented Nov 5, 2017 at 22:15

2 Answers 2

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.

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);