Javascript Callback Function Not Executing As Intended

According to this stackoverflow answer, functions passed as parameters are always callbacks, even if the intention is that the function is called synchronously... and I've learn

Solution 1:

"Callbacks" are usually used in conjunction with asynchronous processes like ajax requests or event handlers attached to the ui. We call them "callbacks" in these cases since they need to be executed after something else and it is clear where the program's logic will pick back up this "call" after the async process is complete or triggered brings us "back" here.

Using setTimeout() you can add to the event loop stack. Using a promise you can invoke the stack on the event loop as you wait for an asynchronous process to finish.

Your code doesn't do anything to interrupt the synchronous flow of the code. This snippet shows how even though we have added a timeout of 0 which should delay the action, we can await a promise to allow the event loop's stack to run.

functionmyfun(a, b, callback) {
  console.log(a);
  callback();
  console.log(b);
}

functioncb() {
  console.log('hi')
}

myfun(1, 2, cb) // result: 1 hi 2// same behavior as abovefunctionmyStaticFun() {
  console.log(1);
  cb();
  console.log(2);
}

myStaticFun();

// now same as before using a promise to wait a moment and the event loop stack is invoked during the pausefunctionsleep(ms) {
  returnnewPromise(resolve =>setTimeout(resolve, ms));
}

asyncfunctionmyEventLoopInvokingFun(a, b, callback) {
  console.log(a);
  setTimeout(callback, 0)
  awaitsleep(0);
  console.log(b);
}

myEventLoopInvokingFun(1, 2, cb);

Solution 2:

It does not necessarily mean that every a callback is asynchronous and must be put into a some task queue and to be executed once synchronous code pieces (call stack is empty) finishes. The callback functions dealing with Promises are candidates for task queue. For instance in your case; cb function simply runs in a synchronous manner; so that the result is 1 hi 2 as you indicated; however if we modify your code as follows:

functionmyfun(a, b, callback) {
    console.log(a);
    window.setTimeout(callback, 0);
    console.log(b);
}

functioncb() {
    console.log('hi');
}

myfun(1, 2, cb)   // result: 1 2 hi

this will result in 1 2 hi. Even though I set the timeout to just 0 milliseconds; cb function will output after the second console.log within myfun function. I would recommend you to take a look at MDN and this good explanation of call stack, event loop, and task queues. Hope this helps.