How to write JQuery callback function

Question

My callback function is not working, I want to run test() after configReq()

$(document).ready(function() {
 configReq($(this).attr('href'), test);
});

var test = function() {
 alert('hi');
};

 function configReq(thisUrl) {
    $('.progress').empty();
    $('.progress').append('<div class="progress-bar bg-success" style="width: 0%; display: block;"></div>');            
}

Please let me know where i am wrong...?

Answer 1

Like this:

$(document).ready(function() {
    configReq('Some item', test);
});

function test() {
    console.log('Callback executed');
};

function configReq(thisUrl, callback) {
    console.log('Executing configReq');
    if (callback) callback();
}

DEMO

Answer 2

Seems like a synchronous one.

Try,

$(document).ready(function() {
 configReq($(this).attr('href'));
 test();
});

OR

$(document).ready(function() {
     configReq($(this).attr('href'),test);
         });

function configReq(thisUrl,nextFunction) {
    $('.progress').empty();
    $('.progress').append('<div class="progress-bar bg-success" style="width: 0%; display: block;"></div>'); 
nextFunction();           
}

Answer 3

To write a function which execute a callback function, you can go like this:

function doSomething(arg,callback) {
    // .....
    if (typeof callback === "function") {
        callback();
    }
}

---

So your code go like this:

DEMO:http://jsfiddle.net/z7LDA/1/

HTML:

<a href="#foo">click me</a>

Javascript:

$(document).ready(function() {
    $("a").click(function(){
         configReq($(this).attr('href'), test);
    });
});

var test = function() {
    alert('hi');
};

function configReq(thisUrl,callback) {
    $('.progress').empty();
    $('.progress').append('<div class="progress-bar bg-success" style="width: 0%; display: block;"></div>');
    if (typeof callback === "function") {
        callback();
    }
}

Answer 4

This is a simple callback function:

$(document).ready(function() {
     configReq($(this).attr('href'), function(){
        alert('hi');
     });
    });

     function configReq(thisUrl) {
        $('.progress').empty();
        $('.progress').append('<div class="progress-bar bg-success" style="width: 0%; display: block;"></div>');            
    }