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 演示