How to know if a Javascript Callback is Synchronous or Asynchronous?

Question

Hi! I am learning about callbacks and I understand that callbacks can be either synchronous or asynchronous.

I was reading about callbacks on https://www.w3schools.com/jquery/jquery_callback.asp and was quite confused.

There is this code:

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
}); 

Can I check if there is a way to know if the above callback is Synchronous or Asynchronous?

I am guessing it is Synchronous above because it has to wait till the "slow" animation is over before the alert comes up. Is it by default in Javascript or Node.js all callbacks are synchronous unless you do something like setTimeOut or process.nextTick?

Answer 1

You have several questions here, so I'll try to answer them one by one:

Is it by default in Javascript or Node.js all callbacks are synchronous unless you do something like setTimeOut or process.nextTick?

In the browser you can kinda have this as the rule of thumb: Only setTimeout, setInterval, requests and events are asynchronous. Other built-in callbacks (like Array.prototype.map) are synchronous.

On Node.js it's more complicated: e.g. you can do file reading both synchronously and asynchronously. Then you just need to know that the callback is asynchronous by nature.

Can I check if there is a way to know if the above callback is Synchronous or Asynchronous?

Unfotunately without checking the source code of the method/function you're calling you cannot know if it's synchronous or asynchronous.

I am guessing it is Synchronous above because it has to wait till the "slow" animation is over before the alert comes up.

Exactly. You can find this from jQuery's documentation for .hide method:

complete
Type: Function()
A function to call once the animation is complete, called once per matched element.

Answer 2

A callback is a function that will get executed once an Asynchronous process is completed. Let's say we have an object person with the following data.

var person = {
 id: 1034
 name: 'Julio',
 age: 23,
 moneyInBank: 0
}

We want to get the the moneyInBank for this person but we don't have access to that information in our local environment. We need to get it from a database in another server, this could take a while depending internet connection, optimization, etc.

getMoneyInBank(person.id, callback) is going to go over that process and fetch the information we need. If we were to run the next script without the callback.

getMoneyInBank(person.id);
console.log(person.money);

We will get 0 in the output because getMoneyInBank has not finished by the time the log is executed. If we want to make sure we will print meaningful information we need to change our code to something like this.

getMoneyInBank(persion.id, function(){
  console.log(person.money);
});

Using a callback the log only is going to be called when getMoneyInBank finishes.

Answer 3

You can easily check:

function isSync(func, ...args){
 var isSync = false;
 const res = func(...args, r => isSync = true);
 if(res instanceof Promise) res.then(r => isSync = true);
 return isSync;
}

console.log( isSync([].map.bind([])) );

Answer 4

Short answer: You need to examine the caller and look for async operations.

Long answer:

A callback is a simple pattern by which a function is passed as a parameter to an higher order function and is called back it or further down the stack.

let mySynchronousFunction = () => 'Hello';
let myHigherOrderFunction = aFunc => {
    return (aFunc() || 'Goodbye') + ' world!';
};

As soon as there is an I/O operation that would block the main thread, it instead will "branch out" and continue execution.

If we continue with our previous example, we would observe the following behavior:

let myAsyncFunction = () => {
    return http.get('http://some.document')
       .then(response => console.log(response)
    );
};
myHigherOrderFunction(mySynchronousFunction); // 'Hello world!'
myHigherOrderFunction(myAsyncFunction); // 'Goodbye world!'

What happened here is that the main thread continued all the way until it had to wait for I/O and instead of blocking there, it went to the next instruction and took note of the point at which it needs to go when the I/O operation is no longer blocked.

So the next expression to evaluation in our code is:

return expression

But our expression branched out, as such it returns undefined. So we are left with:

return undefined

This means that our higher order function that was passed an async function got undefined when it called aFunc().

Once the I/O is done, the main thread returns to where it left off which is the function passed to Promise handler then. At this point the execution thread has branched out and is separated from main "thread".

Now for your question

The callback will be synchronous when the higher order function which calls it is calling it synchronously. Inversely if it is called within the context of the execution branch of an asynchronous operation it will be asynchronous.

This mean that you need to examine what the higher order function to which you pass your callback is doing and look for async operations.

In the context of your question let us examine the following code (HOF = Higher order function):

let mySynchronousHOC = aFunc => aFunc('Hello world!');
let myAsyncHOC = aFunc => {
    http.get('http://hello.com')
        .then(response => aFunc('Goodbye world!')
    );
};

myAsyncHOC(msg => {
    console.log(msg);
});

mySynchronousHOC(msg => {
   console.log(msg);
});

The result of which will be:

'Hello world'
'Goodbye world'

Here we know that myAsyncHOC is asynchronous because it does an I/O operation.

Answer 5

I am not sure "synchronous" and "asynchronous" makes sense in this context. You can talk about sync or async when making ajax requests, which would mean that in a sync request everything else stops until the response is received, while in an asynchronous request something else can happen until the server sends the response.

In your particular case ( https://www.w3schools.com/jquery/jquery_callback.asp ) what happens is this:

• in the "slow" case a timeout is set and the callback is called when the time is out

• in the second case a timeout is set for hiding the paragraph but the function is called imediately on the next line, before the time is out

this is not sync/async, it is about event programming