In JavaScript, create a custom callback.

Problem

All I have to do now is call a callback function when the current function completes.

function LoadData() 
{
    alert('The data has been loaded');
    //Call my callback with parameters. For example,
    //callback(loadedData , currentObject);
}

This is what a consumer for this function should look like:

object.LoadData(success);

function success(loadedData , currentObject) 
{
  //Todo: some action here 
}

How do I put this into action?

Asked by Amgad Fahmi

Solution #1

Actually, your code will work just fine as is; simply declare your callback as an argument and use the parameter name to call it directly.

function doSomething(callback) {
    // ...

    // Call the callback
    callback('stuff', 'goes', 'here');
}

function foo(a, b, c) {
    // I'm the callback
    alert(a + " " + b + " " + c);
}

doSomething(foo);

That will trigger doSomething, which will trigger foo, which will trigger the alert “something goes here.”

It’s vital to note that giving the function reference (foo) rather than calling the function and passing the result (foo()) is critical. You do it correctly in your inquiry, but it’s worth mentioning because it’s a typical mistake.

You may choose to invoke the callback so that it sees a specific value for this. Using the JavaScript call function, you can simply accomplish this:

function Thing(name) {
    this.name = name;
}
Thing.prototype.doSomething = function(callback) {
    // Call our callback, but using our own instance as the context
    callback.call(this);
}

function foo() {
    alert(this.name);
}

var t = new Thing('Joe');
t.doSomething(foo);  // Alerts "Joe" via `foo`

Arguments can also be passed:

function Thing(name) {
    this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
    // Call our callback, but using our own instance as the context
    callback.call(this, salutation);
}

function foo(salutation) {
    alert(salutation + " " + this.name);
}

var t = new Thing('Joe');
t.doSomething(foo, 'Hi');  // Alerts "Hi Joe" via `foo`

It’s sometimes more convenient to pass the callback arguments as an array rather than individually. To do so, you can utilize the following application:

function Thing(name) {
    this.name = name;
}
Thing.prototype.doSomething = function(callback) {
    // Call our callback, but using our own instance as the context
    callback.apply(this, ['Hi', 3, 2, 1]);
}

function foo(salutation, three, two, one) {
    alert(salutation + " " + this.name + " - " + three + " " + two + " " + one);
}

var t = new Thing('Joe');
t.doSomething(foo);  // Alerts "Hi Joe - 3 2 1" via `foo`

Answered by T.J. Crowder

Solution #2

Before attempting to perform a callback, it’s a good idea to double-check that it’s a valid function:

if (callback && typeof(callback) === "function") {

  callback();
}

Answered by Donald A Nummer Jr

Solution #3

My two cents. The same yet not the same…

<script>
    dosomething("blaha", function(){
        alert("Yay just like jQuery callbacks!");
    });


    function dosomething(damsg, callback){
        alert(damsg);
        if(typeof callback == "function") 
        callback();
    }
</script>

Answered by K. Kilian Lindberg

Solution #4

function loadData(callback) {

    //execute other requirement

    if(callback && typeof callback == "function"){
        callback();
   }
}

loadData(function(){

   //execute callback

});

Answered by arun bahal

Solution #5

   function callback(e){
      return e;
   }
    var MyClass = {
       method: function(args, callback){
          console.log(args);
          if(typeof callback == "function")
          callback();
       }    
    }

==============================================

MyClass.method("hello",function(){
    console.log("world !");
});

==============================================

Result is:

hello world !

Answered by Eyad Farra

Post is based on https://stackoverflow.com/questions/2190850/create-a-custom-callback-in-javascript