修改

Question

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

我有一个加载模式如下：

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

显示信息的功能;返回一个承诺：

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

试试Angular-loding-bar，非常简单！

Doucumation - docs。

简单示例：

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeBar = false;
  }])

Answer 2

修改

您需要从根本上改变您的工作方式。 functionToWaitOn()需要返回承诺，并且根据事物的外观，secondFunction()和thirdFunction()

也是如此

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

我认为你应该更多地了解推迟和承诺的工作方式。见 Change the width of Master in UISplitViewController 和 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');
    }
});

请注意，在此之后您可能会this

在功能处理时加载消息

2 个答案:

修改