Pfthb

If callbacks are supposed to allow one function to wait for another function to finish before being called, why does the following not work?

function doHomework(subject, callback) 
 setTimeout(function() 
 console.log(`Starting my $subject homework.`)
 , 1000)
 callback()


function finishHomework() 
 console.log('Homework Finished!')


doHomework('chemistry', finishHomework)

This outputs the following:

Homework Finished!
Starting my chemistry homework.

But it should be the other way around. Why doesn't the callback wait for the setTimeout to finish before being called?

You'll need to understand JS's execution model. Since JS was intended to run in a GUI, it is event driven thus runs in an event loop. This means that the main thread is executing your script, but other threads may work on ready-work enqueued by the main thread.

for (;;)
 if event = dequeueWork()
 handleEvent(event)
 else
 sleep(SOME_TIME)

When your script is interpreted, the JS engine knows that doHomework() has a timeout event registration. Timeouts are like sleeps in other languages, but because this is an event-loop model, we cannot block the GUI. So this function actually is handled by a background thread. When the duration has elapsed, then the main thread is notified -- this is how all IO is handled in JS.

Understanding this, it's easy to see what's happening: the callback is being fired right after the timeout event was registered.

from c-sharpcorner.com

To fix this, as others have mentioned, you'll need to call the callback inside timeout's callback:

function doHomework(subject, callback) 
 console.log(`Starting my $subject homework.`)

 setTimeout(function() 
 callback();
 , 1000);


function finishHomework() 
 console.log('Homework Finished!')


doHomework('chemistry', finishHomework)

Of course we're all not lucky enough to finish our homework 1sec after starting ;)

Helpful resources:

• The Node.js Event Loop


• v8


• SpiderMonkey

A callback is the name of something which is executed in the future, your callback is not being executed in the future, is being executed right after calling the function setTimeout.

What you actually want to do is call the function finishHomework one second in the future, therefore, you have to put that callback within the handler of the function setTimeout as follow:

function doHomework(subject, callback) 
 setTimeout(function() 
 console.log(`Starting my $subject homework.`);
 // Here depends of your needs, in this case the callback
 // will be called after all the previous logic is executed.
 callback()
 , 1000)



function finishHomework() 
 console.log('Homework Finished!')


doHomework('chemistry', finishHomework)