javascript - 在函数处理时加载消息

Question

我正在寻找一种方法，让弹出对话框在函数执行时显示加载消息。我看到了为页面加载执行此操作的示例，但我不太清楚如何为 javascript 函数处理此问题。我已经进行了多次尝试，但由于我无法管理此操作的异步性质，它们都失败了。加载消息对话框，然后执行该函数，然后关闭消息对话框。例如，我可以让消息弹出并让进程运行；但尝试添加结束部分失败。我发现关闭对话框部分在我尝试处理的实际功能完成之前触发。

我的加载模式如下:

<loading modal-id="loadingMessage" message="Processing, please wait..."></loading>  

显示消息的函数；它返回一个 promise :

function displayLoadingMessage() {
    var count = 0;
    var defer = $q.defer();

    var stop = $interval(function() {
        var loadingMessage = $('#loadingMessage');

        if (loadingMessage != null && loadingMessage.length > 0) {
            loadingMessage.modal({
                keyboard: false,
                backdrop: 'static'
            });

            $interval.cancel(stop);
            defer.resolve();
        }

        count++;

        if (count > 100) {
            $interval.cancel(stop);  
            defer.resolve();
        }
    }, 100);

    return defer.promise;
};

我尝试以异步方式链接调用，如下所示:

var message = displayLoadingMessage() 
message.then(functionToWaitOn()).then($('#loadingMessage').modal('hide'));

函数functionToWaitOn()调用其他函数。基本布局是:

function functionToWaitOn() {
    if(condition == true) {
        secondFunction();
    } else {
        thirdFunction();
    }
} 

secondFunction()/thirdFunction() 是主要工作完成的地方；它们触发服务器端的一个进程来执行，这就是需要时间的。

感谢任何帮助。

Answer 1

编辑

您需要从根本上改变您的做法。 functionToWaitOn() 需要返回一个 Promise，从表面上看，secondFunction() 和 thirdFunction()

也是如此。

我假设您正在调用 $http.get() 或类似的东西 - 您需要使该特定函数返回一个 promise 。

我认为您应该更多地了解延迟和 promise 的工作原理。请参阅this 和 this

function functionToWaitOn() {
    var defer = $q.defer();
    if (condition) {
        secondFunction().then(function() { defer.resolve() }
    } else {
        thirdFunction().then(function() { defer.resolve() }
    }
    return defer.promise;
}

<小时/>

您需要记住 then() 将匿名函数或函数指针作为参数。您的代码需要是:

var message = function() {
    return displayLoadingMessage();
}

message().then(function() {
    functionToWaitOn().then(function() {
        $("#loadingMessage").modal('hide');
    }
});

或者更简单地说...

displayLoadingMessage().then(function() {
    functionToWaitOn().then(function() {
        $("#loadingMessage").modal('hide');
    }
});

请注意，您可能最终会出现 callback hell在此之后