jquery - 在继续处理之前让我的 div 消失

Question

我有以下 jQuery 脚本:

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

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

我想要实现的是让我的加载div(一种等待的弹出窗口)慢慢消失。但它不起作用，因为当调用 fctHideLoadingDlg 时，即使我设置了 5000 的淡入淡出，它下面的代码也会继续执行...

知道如何防止这种情况吗？

谢谢。

Answer 1

这很正常。 fctSaveSuccess的执行不会被阻塞，因为fctHideLoadingDlg会在调用fadeTo后立即返回。 fadeTo 传递了一个回调，该回调将在完成时运行，但不会阻塞。

您可以在代码中采用相同的回调路线。函数是 Javascript 中的对象，因此它们也可以轻松地作为参​​数传递:

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