javascript - JQuery show() - 暂停函数直到执行回调

Question

这个问题已经有答案了:

How to attach callback to jquery effect on dialog show? (5 个回答)

已关闭 9 年前。

我希望我的 javascript/jquery 应用程序停止执行所有动画，并且仅在显示加载 .gif 时继续执行。

我确实设法在其他动画进行时显示加载 .gif，但我确实需要它在其他动画播放之前就已经显示。

所以我构造了一个等待回调执行的方法，但它没有按预期工作。

var Shown = false;
function ShowLoadingGif() {
    $("#loading").show("fast", function() {
        Shown = true;   
    });
    while(!Shown) {
        //wait for callback to be executed
    }
    Shown = false;
}

参见this JFiddle example 。我不仅想知道如何正确地解决这个问题；而且想知道如何解决这个问题。我也非常感谢任何有关它为何不能按我预期工作的意见。

提前致谢!

Answer 1

您可以使用类似的方法，使用 jQuery 延迟对象(请参阅 Docs)

var Shown = false;
function ShowLoadingGif() {
    var $promise = $.Deferred();
    $("#loading").show("fast", function() {
        $promise.resolve("Im done");
    });
    $promise.done(function(data) {
         // data === "Im done"
    });
}

我已经更新了您的 Fiddle，现在，当事情完成时，它会按照您的预期发出警报

Fiddle (http://jsfiddle.net/k5Wan/3/)

我还更新了代码质量

var $promise = $.Deferred();

$promise.done(function() {
    alert("Done...");
});

$(function() {
    $("button").on("click", function() {
        $("#loading").show("slow", function() {
            $promise.resolve();
        });
    });
});