How to callback the given function

Question

I am fixing code but facing problems due to the asynchronous nature of JavaScript. In the given function:

function submitQuery() {    
    disableButton();
    infoDisplay('DBQuery');
    enableButton()
}

disableButton() is for changing the image to be disable to let the user know that a function has been started.

infoDisplay() is another function which carries some function at server. while enable button is used to bring back the normal icons.

function disableButton() {
    idBRQuerySubmitBtn.src='images/Button/Disabled/Retransmit_Message_Search.gif';
    idQuerySubmitBtn.src='images/Button/Disabled/Database_Access_Search.gif';
    idQueryResetBtn.src='images/Button/Disabled/Reset.gif';
}

function enableButton() {
   alert('to check when it is fired');
   idBRQuerySubmitBtn.src='images/Button/Normal/Retransmit_Message_Search.gif';
   idQuerySubmitBtn.src='images/Button/Normal/Database_Access_Search.gif';
   idQueryResetBtn.src='images/Button/Normal/Reset.gif';
}

Here enableButton() is getting fired before infoDisplay() is completed. How to make sure infoDisplay() gets executed before enableButton is fired?

Answer 1

I would suggest you to pass enableButton in infoDisplay as callback function. So modify your infoDisplay function as

function infoDisplay(parameter, callback) {
    //Do something
    if (callback && typeof(callback) === "function") {
        callback();
    }
}

Call function like

infoDisplay('DBQuery', enableButton);