Loading Message While Function Prozesse

Question

Ich bin auf der Suche nach einer Möglichkeit, ein Pop-up-Dialogfeld eine Lade-Nachricht anzuzeigen, während eine Funktion ausgeführt wird. Ich sehe Beispiele dafür, wie ich das für das Laden einer Seite mache, aber es ist mir weniger klar, wie ich das für eine JavaScript-Funktion handhaben soll. Ich habe mehrere Versuche unternommen und sie scheitern aufgrund meiner Unfähigkeit, die asynchrone Natur dieser Aktion zu verwalten. Laden Sie den Nachrichtendialog, führen Sie dann die Funktion aus und schließen Sie den Nachrichtendialog. Zum Beispiel kann ich die Meldung erhalten, Pop-up gut zu machen und den Prozess laufen zu lassen; aber der Versuch, den Close-Out-Bereich hinzuzufügen, scheitert. Ich finde, dass der Closed-Dialog-Teil ausgelöst wird, bevor die eigentliche Funktion, die ich zu verarbeiten versuche, beendet ist.

I eine Lade modal haben wie folgt:

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

Die Funktion, um die Nachricht anzuzeigen; was ein Versprechen zurück:

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; 
}; 

Ich habe versucht, die Anrufe in einer asynchronen Art und Weise Verkettungs wie folgt:

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

Die Funktion functionToWaitOn() Anrufe andere Funktion (en). Das Grundlayout ist jedoch:

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

secondFunction()/thirdFunction() ist, wo die Hauptarbeit getan wird; Sie lösen auf der Serverseite einen Prozess aus, der ausgeführt wird, und das kostet Zeit.

Jede Hilfe wird geschätzt.

Answer 1

EDIT

Sie müssen grundlegend ändern, wie Sie dies tun. functionToWaitOn() braucht ein Versprechen zurückzukehren, und von den Blicken der Dinge, so tun secondFunction() und thirdFunction()

ich irgendwo auf dem Weg nehme an, Sie $http.get() oder etwas ähnliches nennen - Sie, dass bestimmte Funktion ein Versprechen machen müssen zurückzukehren.

Ich denke, Sie sollten mehr darüber lesen, wie verzögert und Versprechen funktionieren. Siehe this und this

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

---

Sie müssen sich daran erinnern, dass then() anonyme Funktionen oder Funktionszeiger als Argumente übernimmt. Ihr Code muss sein:

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

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

Oder einfacher ...

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

Beachten Sie, dass Sie Ich versuche, in callback hell nach diesem

Answer 2

Versuchen Sie Angular-loding-bar, es ist sehr einfach!

Doucumation - docs.

Einfaches Beispiel:

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