Back
Close

JavaScript promises, mastering the asynchronous

Magus
37.9K views
Next: Why do we need asynchronous?

In JavaScript, asynchronous execution comes in multiple forms. The simplest example is shown below:

Asynchronous code using setTimeout
setTimeout(function() {
console.log('I am an asynchronous message');
}, 1000);
console.log('I am a synchronous message');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can try to modify the displayed messages or the time provided to the setTimeout function. Even with a 0 millesecond delay, the asynchronous message will be displayed after the synchronous message. This is because any function given to the setTimeout function will be executed asynchronously, when the main thread is not busy anymore. You can try this code as an example:

Asynchronous code is always executed after the main thread
setTimeout(function() {
console.log('I am an asynchronous message');
}); // You can omit the 0
console.log('Test 1');
for (let i = 0; i < 10000; ++i) {
doSomeStuff();
}
console.log('Test 2');
// The 'I am an asynchronous message' will be displayed when the main thread reach here
function doSomeStuff() {
return 1 + 1;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

What can we learn from this? Simply, never trust the delay given to the setTimeout function. You can only specify a minimum delay. Even if you set a 0 delay, your code could be executed much later.

MDN documentation of setTimeout

Try this example of asynchronous code in JavaScript using setInterval:

Asynchronous code using setInterval
let counter = 0;
let timer = setInterval(function() {
console.log('I am an asynchronous message');
counter += 1;
if (counter >= 5) {
clearInterval(timer);
}
}, 1000);
console.log('I am a synchronous message');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

setInterval has the same behavior as setTimeout but the code is executed multiple times. You have to call clearInterval to kill the timer.

MDN documentation of setInterval

setTimeout and setInterval are the only native functions of the JavaScript to execute code asynchronously. However, if you are familiar with JavaScript, you have probably dealt with asynchronous execution in various forms. It can happen in multiple situations (non-exhaustive list):

  • Performing an HTTP request
  • Any I/O operation when you are in a NodeJS environment
  • Dealing with a WebSocket (client or server side)

The following code snippet is asynchronously reading a file with NodeJS:

Read a file in NodeJS
let fs = require('fs');
fs.readFile('test.txt', 'utf8', function(error, data) {
if (error) {
throw error;
}
console.log("Asynchronous message. Content of test.txt:", data);
});
console.log('Synchronous message');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Create your playground on Tech.io
This playground was created on Tech.io, our hands-on, knowledge-sharing platform for developers.
Go to tech.io
codingame x discord
Join the CodinGame community on Discord to chat about puzzle contributions, challenges, streams, blog articles - all that good stuff!
JOIN US ON DISCORD
Online Participants