Javascript, simple callback example not working as expected

Question

First, thanks alot for anybody who will have a look at my question. It is totally basic but I just don`t get it. I have looked through all tutorials, but asynchronous callbacks drive me crazy. Thank you so much for helping out, greetings from Germany :)

If somebody could tell me why below code does not log into the console as expected. Expected means, callback is called after the Timeout function has completed. Instead, my console logs the callback first? What am I still getting wrong here?

function doHomework(subject, callback) {
  setTimeout(function () {
   console.log(`Starting my ${subject} homework.`);
  }, 10);
  callback();
}

doHomework('math', function() {
  console.log('Finished my homework');
});

Delvian · Accepted Answer · 2018-05-01 08:48:01Z

1

The problem is that you execute the callback outside of your setTimeout function. Javascript executes code asynchronously, meaning that it does not wait until the previous code is "finished" before it continues to the next line.

Hence, when you call doHomework, it will start the timer, and immediately continue to the next line of code, which is the callback. Then, when the 10ms is over, the code inside the timeout is executed. In order to get the desired result, you will have to place the callback execution inside the setTimeout function, like so:

function doHomework(subject, callback) {
   setTimeout(function () {
      console.log(`Starting my ${subject} homework.`);
      callback();
   }, 10);
}

answered May 1, 2018 at 8:48

Delvian

1858 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

betzebube1000 Over a year ago

Thank you very much Delvian, for your quick and precise answer. Though I understand your point, I still don´t understand it completely. In putting the callback inside the Timeout (per definition then letting the callback being fired after the timeout) works BUT I thought Callbacks always make sure that something works synchronous. If my console log would take more time (in case it would be a look up in a database) how make I sure that the callback is then fired afterwards as I do not know it by milliseconds. Sry in case it is confusing. Within {} something works syncronous?

Aliaksandr Sushkevich Over a year ago

Callbacks by themselves does not make anything synchronous. Callback is just a function that can be passed to another function and will run in some other place. And if it was a database lookup you'd just pass your callback further to that lookup function and it would run exactly afther this lookup.

Delvian Over a year ago

I'm afraid not. The point of callbacks is that you only call them once you know you have set the preconditions needed. In fact, the function that you pass to the setTimeout is in itself a callback. For example, when you need data from an Ajax call before executing a function, you make sure that you execute that function as a callback at the moment when the data has been retrieved.

betzebube1000 Over a year ago

Thanks a lot to both of you! @Delvian, your last sentence: How do I make sure that I execute the function as a callback AFTER the data has been retrieved. Do I manually set up a timeout?

betzebube1000 Over a year ago

@Aliaksandr, var x = "lookUp some value"; Callback();

|

Aliaksandr Sushkevich · Accepted Answer · 2018-05-01 08:47:51Z

1

You need to put the call of a callback function inside your setTimeout

function doHomework(subject, callback) {
  setTimeout(function () {
   console.log(`Starting my ${subject} homework.`);
   callback();
  }, 10);
}

answered May 1, 2018 at 8:47

Aliaksandr Sushkevich

12.5k8 gold badges41 silver badges46 bronze badges

2 Comments

betzebube1000 Over a year ago

Thank you very much for your answer, Aliaksandr! As you see in the coment above, your solution works but I still don`t understand the concept of a callback I guess.... I tried to upvote you but due to my new profile it seems to be not possible. Thanks a lot!

Aliaksandr Sushkevich Over a year ago

Try to watch this video: youtube.com/watch?v=8aGhZQkoFbQ it has a really great explanation of how it works.

Collectives™ on Stack Overflow

Javascript, simple callback example not working as expected

2 Answers 2

11 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related