Search code examples
javascriptcallbackblocking

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

Solution

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