CODEWITHSUNDEEP
javascriptcallbackblocking
gxvigo
gxvigo

Reputation: 837

Javascript: non-blocking callback (yet another time)

I am not an experienced developer and I have spent the last couple of days trying to understand few fundamental concepts about Javascript. Single thread, blocking vs non-blocking and callback. I have read a lot but I am still confused.

My understanding is that in a simple JS code all the statements are executed sequentially within a single thread. In a more sophisticated situation where there are long running statements (db calls, network interaction, etc) this can be a huge problem. The program execution (next statement) is BLOCKED until the current (long running) statement is completed. Solution is to implement an asynchronous pattern, where the long running statement is executed in back ground (I can be brutally wrong here!) while the next statements are executed and when the long running statement has done, it passes back its result using a callback function provided in the calling statement.

Copy and pasting code from here and there I have written a trivial piece of code where I have a call back function

// function with callback    
function doSomething(callback) {
    callback();
}

// callback function implementation
function doSomethingElse() {
    document.write("<p>Second element in the page</p>");
}

doSomething(doSomethingElse);   
document.write("<p>First element in the page</p>");

The result of this code is actually what I would have expected before starting reading about non-blocking and callback (sequential code execution): - Second element - First element

So my question is, what's the magic fairy dust that transforms my code into asynchronous non-blocking one?

Cheers, Giovanni

Upvotes: 0

Views: 108

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

You have used callbacks, but it doesn't mean that this call is asynchronous.

It synchronously runs doSomething, which runs callback and outputs "Second element".

It would be asynchronous, if you had an asynchronous call there - AJAX call, file system access or a simple setTimeout: 

function doSomething(callback) {
  setTimeout(callback, 1000);
}

// callback function implementation
function doSomethingElse() {
  document.write("<p>Second element in the page</p>");
}

doSomething(doSomethingElse);   
document.write("<p>First element in the page</p>");

Now, it does the following: runs doSomething, which runs setTimeout and runs doSomethingElse right after that. At the same time, setTimeout asynchronously waits for 1 second and calls the function.

In other cases, it could be any other asynchronous operation, which requires time to complete.

Upvotes: 1

Quentin
Quentin

Reputation: 944530

what's the magic fairy dust that transforms my code into asynchronous non-blocking one?

In general, most long running operations will be handled APIs which handle asynchronous operations at a lower level than JavaScript (XMLHttpRequest for making HTTP requests being a prime example).

If you have need to implement a long running function yourself (maybe you want to do some heavy number crunching on the client) then you can use Web Workers.

var myWorker = new Worker("find_prime_numbers.js");
myWorker.onmessage = function(e) {
  console.log('Next prime number is ' + e.data);
}

and in find_prime_numbers.js:

// Calculate some primes
postMessage(my_prime_number);

Upvotes: 1

Related Questions