Question

I have the following jQuery script:

function fctSaveSuccess(data) {
    fctHideLoadingDlg();
    alert('continue...');
    ...
}

function fctHideLoadingDlg(disableBtn) {
    $("#loading").fadeTo(5000, 0.5, function () {
        $("#loading").dialog('destroy').remove();
    });
}

What I would like to achieve is having my loading div (a kind of popup for waiting) to disappear slowly. But it doesn’t work because when fctHideLoadingDlg is called the code below it continue to be executed even if I have set a fading of 5000…

Any idea how can I prevent this?

Thanks.

Answer 1

That is quite normal. The execution of fctSaveSuccess will not be blocked, because fctHideLoadingDlg will return right after calling fadeTo. fadeTo is passed a callback that will run when it completes, but that does not block.

You could take the same callback route in your code. Functions are objects in Javascript, so they can also be easily passed around as parameters:

function fctSaveSuccess(data) { 
    var afterHide = function () {
        alert('continue...'); 
        /* rest of your code */
    };
    fctHideLoadingDlg(afterHide); 
} 

function fctHideLoadingDlg(callback, disableBtn) { 
    $("#loading").fadeOut(5000, function () { 
        callback();
        $("#loading").dialog('destroy').remove(); 
    }); 
}

jsFiddle Demo