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

Question

我希望我的 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;
}

请参阅此 JFiddle 示例。我不仅想知道如何正确解决这个问题；我也很感激任何关于它为什么不能按我预期工作的意见。

提前致谢！

Answer 1

你可以使用这样的东西，使用 jQuery Deferred Object (see 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，它现在会在事情完成时发出警报，正如你所期望的那样

小提琴（http://jsfiddle.net/k5Wan/3/）

我还更新了代码质量

var $promise = $.Deferred();

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

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

Answer 2

您可以缩短所有这些：

$('#loading').show('fast', function(){
  console.log('Im loaded');
}).promise().done(function(){
  console.log('great loading with you!');
});

演示