UX Design and Development course

Callback functions

A callback function is executed after the current effect is finished. Kind of a function wrapped inside another function as illustrated in the following example.

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

Same example, without a callback function:

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

The reason for this, as you would see when you run the code, without the callback, the action inside the function fires immediately. As illustrated in this use case, we don't want that to happen.