Javascript Promises Unexpected Ausführungsablauf

Question

Übersicht

ich eine HTML-Seite mit einer Spannweite haben. Der innere Text sagt "Anfangszustand". Der Skriptblock wird geladen, sobald der Körper gerendert wurde und ein PersonService zu UpdatePerson aufgerufen wird, das ein Person-Objekt übergibt. Die UpdatePerson-Methode wird für 5 Sekunden inaktiviert, um einen Serviceanruf nachzuahmen, der einige Zeit in Anspruch nimmt und dann eine Promise mit einem "zufälligen" Wahr- oder Falsch-Ergebnis zurückgibt. Der Hauptcodeblock, der dann auf true oder false basiert, setzt die Nachricht im inneren Bereich der Spanne auf "Success" oder "Failed". Nach dem Versprechen habe ich den inneren Text zu "Ergebnis Warten ...."

erwartete Reihenfolge der Text in Span
1) Anfangszustand
2) Warten auf Ergebnisse ....
3) (5 Sekunden später) .... Erfolg oder Fehlgeschlagene

Tatsächliche Ergebnisse
1) Anfangszustand
5 Sekunden später ...
2) Warten auf Ergebnisse ....

Ich dachte, sobald die Ausführung des Skripts die Zeile getroffen hat, die die Promise konsumiert, würde die Ausführung sofort zur nächsten Zeile fortgesetzt, die den inneren Text auf "Erwarten des Ergebnisses ..." setzt und dann Der Promise-Status wurde von Pending geändert (dh 5 Sekunden später), dann würde er in die Ausführung von Resolve oder Reject wechseln. Das Versprechen schien synchron statt asynchron ausgeführt zu werden.

Ich verpasse hier etwas in meinem Verständnis oder wie ich eine Verzögerung in einem Anruf zu einer anderen Aufgabe nachgeahmt habe, dh die Person zu aktualisieren. Kann jemand meine Verwirrung klären?

Script startet über das onload-Attribut des Body-Tag ruft StartExample()

function Sleep(milliseconds) { 
     var start = new Date().getTime(); 
     for (var i = 0; i < 1e7; i++) { 
     if ((new Date().getTime() - start) > milliseconds){ 
      break; 
     } 
     } 
    } 

    function Person(name, age, gender) 
    { 
    this.name = name; 
    this.age = age; 
    this.gender = gender; 
    } 

    personService = {} 

    personService.UpdatePerson = function(person){ 
    Sleep(5000); 
    return Promise.resolve((Math.random() >= 0.5)); 
    }; 

    function StartExample(){ 

     var resolve = function(){ 
       // get resultSpan from DOM, write "Success" message 
     } 

     var reject = function(){ 
      // get resultSpan from DOM, write "Failed" message 
     } 

     var p = new Person("tom", 15, "m");    

     personService.UpdatePerson(p) 
     .then(function(result){ 
      if(result){resolve();} 
      else{reject();} 
     }) 
     .catch(error => { alert(error);}) 

     var resultSpan = document.getElementById("resultSpan"); 
     resultSpan.innerText = "Awaiting result...";  
    } 
</script> 

<span id="resultSpan" style="background-color: blue;">Initial State</span> 

Answer 1

Dies ist nicht, wie Sie eine Verzögerung in Javascript zu imitieren. Stattdessen window.setTimeout() wie folgt verwenden:

personService.UpdatePerson = function(person){ 
     return new Promise(function(resolve) { 
      window.setTimeout(function() { 
       resolve(Math.random() >= 0.5), 
      5000); 
     }); 
    }; 

Was Sie tun, blockiert, was so ziemlich immer schlecht in Javascript ist.