I am really struggling here to get to grips with writing asynchronous JavaScript. Could you please provide an example of a simple JavaScript function which is asynchronous written in plain JavaScript (and not using Node.js or JQuery)
5
-
@SLaks read Bergi's answer. That's basically what I am referring to.Ryan– Ryan2012-12-10 18:24:25 +00:00Commented Dec 10, 2012 at 18:24
-
@ryan You're contradicting yourself. You said AJAX is the only "plain" Javascript that is asynchronous, but then you're agreeing with Bergi about the other types of asynchronous things in Javascript...Ian– Ian2012-12-10 18:27:26 +00:00Commented Dec 10, 2012 at 18:27
-
1@ryan: But asynchrony has nothing to do with single-threaded-ness. Aside from Web Workers (obviously), all Javascript asynchrony is still single-threaded.SLaks– SLaks2012-12-10 18:27:37 +00:00Commented Dec 10, 2012 at 18:27
-
1Thanks for the comments guys but why the vote down of my question? - its these type of confusions about async I wanted to clear up for myself and others.Jasdeep Khalsa– Jasdeep Khalsa2012-12-10 18:45:22 +00:00Commented Dec 10, 2012 at 18:45
-
Is it possible to move this question to a more appropriate forum. This seems a valid question and both it and the answers are a useful, straight-forward resource.Daniel Hollinrake– Daniel Hollinrake2014-05-01 15:12:41 +00:00Commented May 1, 2014 at 15:12
Add a comment
|
3 Answers
JavaScript itself is synchronous and single-threaded. You cannot write an asynchronous function; plain JS has no timing API. There will be no side-effects from parallel threads.
What you can do is use some APIs provided by your environment (Node.js, Webbrowser) that allow you to schedule asynchronous tasks - using timeouts, ajax, FileAPI, requestAnimationFrame, nextTick, WebWorkers, DOM events, whatever.
An example using setTimeout (provided by the HTML Timing API):
window.setTimeout(function() {
console.log("World");
}, 1000);
console.log("Hello");
Update: Since ES6 there are promises as an asynchronous primitive built into plain JavaScript, so you can do
Promise.resolve("World").then(console.log); // then callbacks are always asynchronous
console.log("Hello");
However, on their own they're not really helpful when there is nothing you could wait for (such as a timeout). And they don't change anything about the threading model either, all execution is run-to-completion without any events interfering midway.
5 Comments
raina77ow
+1, very true; 'async' tasks are just the ones shifted in the execution queue. Hence the (sometimes) useful trick with
setTimeout(func, 0). )
Jasdeep Khalsa
I thought async was less about timing and more about running a function or set of functions as a kind of background task so that the JavaScript interpreter need not wait to run the next function. Or in other words, running functions in parallel rather than in a series. Is that true?
Bergi
@jasdeepkhalsa: No, the javascript itself does not run in parallel - it's always single-threaded (WebWorkers being the workaround). What happens in background is the waiting, the file access, the HTTP request etc.
zerkms
Hello from 2016: "JavaScript itself is synchronous" --- is this still kept after the
Promises were added to the standard?Bergi
@zerkms: I guess the answer needed an update, yeah
This is asynchronous:
setTimeout(function(){
console.log('1');
}, 2000);
console.log('2');
2 will be written to the console before 1. Because setTimeout is async.
Comments
Here's one very simple example:
for (var i = 0; i < 10; i++) {
window.setTimeout(function() {
console.log(i);
}, 2000);
}
You might expect these console.log() calls to show you 0, 1, 2 etc., as in this snippet:
for (var i = 0; i < 10; i++) {
console.log(i);
}
But in fact only 10s will be printed! The reason that functions passed into setTimeout function (as its 'callback' argument) will be invoked after for loop is completed - i.e., after i value is set to 10.
Yet you should understood one thing: all JavaScript in a browser executes on a single thread; asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution queue. Here's a brilliant article written by John Resig on this topic.
1 Comment
Ian
The problem with the loop is a scoping issue, not because of it's asynchronous nature. If they were scoped correctly, the loop would work as expected. Although it's a good explanation of the functions passed to
setTimout executing after the for loop