Reputation: 53
I am new to the concept of JavaScript's asynchronous behavior.
The below code is confusing me. According to my concept function b should return before the wait function finishes executing because I am not telling it wait using 'await'. But the output I am getting is this : before then it waits for 6 seconds after after b
expected output : before after after b without waiting for 6 seconds Here is the code :
function wait(ms)
{
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
async function b () {
console.log('before');
wait(6000);
console.log('after');
}
async function c () {
b()
console.log('after b');
}
c();
Please help me understand this concept better
Upvotes: 2
Views: 3008
Reputation: 113866
It's very easy to understand. The function wait()
is synchronous.
The async
keyword does not make a function async. It only allows you to use the await
keyword within a function marked with async
.
So how can you know if a function is asynchronous of synchronous? The easiest way is to read the docs.
Javascript has almost no features that can signal to you if a function is synchronous or asynchronous. Not even the existence of callbacks is a signal. For example, Array.prototype.sort()
accepts a callback but is fully synchronous. The async
keyword is a good step in the right direction that can signal that a function is asynchronous but as you yourself have demonstrated it depends on the author of the function understanding what the async
keyword does.
The upside is that documentation in javascript tend to be extremely good unlike other languages like Java or C++ because generally there's no automatic documentation (even if you use automatic documentation system in js you need to manually write the comments for it). There is a general culture of writing detailed, clear documentation in README files so that npm picks it up for users of libraries.
So how can one write an async function in javascript?
Generally there are only two ways to do it:
Use an async function. For example setTimeout()
or fetch()
:
function waitOneSecond () {
return new Promise(functionn (ok,err) {
setTimeout(ok,1000);
});
}
Write it in C. For node.js you can use the Addons API to implement modules in C/C++ (https://nodejs.org/api/addons.html), Chrome has NaCl (https://developer.chrome.com/native-client) etc. It's how functions like setTimeout()
, fetch()
etc were implemented.
Upvotes: 3
Reputation: 1903
Please see this example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function.
As said, the async
keyword allow you to use await. It technically does a bit more but lets leave that out for now.
The example shows a Promise
(which does allow asynchronous programming) for which the async
function await
s to resolve before it continuous. Basically, await
allows you to write synchronous code while dealing with asynchronous functions.
Try to play with the example (for instance remove await). This will result in the code not to wait for the promise and return the promise instead of the promise's resolve value.
If you want to dive into asynchronous programming your best bet is to dive into Promise
s. These provide you the interfaces to do so.
The concept is fairly simple. You do some work and call a callback (either resolve when success, or reject on failure) when done. Understanding the interface might be a little more difficult but MDN has great documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise.
Upvotes: 1