Javascript promise 意外的执行流程

Question

概述

我有一个带有跨度的 html 页面。内部文字为“初始状态”。一旦主体被渲染，并且调用 personService 来传递 Person 对象的 UpdatePerson ，脚本 block 就会加载。 UpdatePerson 方法休眠 5 秒以模拟需要一些时间的服务调用，然后返回带有“随机”true 或 false 结果的 Promise。然后，主代码块根据 true 或 false 将跨度内部文本中的消息设置为“成功”或“失败”。在 promise 之后，我将内部文本设置为“等待结果......”

跨度中文本的预期顺序
1) 初始状态
2) 等待结果....
3) (5秒后) .... 成功或失败

实际结果
1) 初始状态
5秒后...
2) 等待结果....
3)成功或失败

我认为，一旦脚本执行到达消耗 Promise 的行，执行将立即继续到下一行，该行将内部文本设置为“等待结果...”，然后当 Promise 状态从 Pending 更改时(即5秒后)就会切换到执行resolve或reject。这个 promise 似乎是同步执行的，而不是异步执行的。

我在这里遗漏了一些东西，要么是我的理解，要么是我如何模仿对另一项任务的调用的延迟，即更新人员。有人可以解答我的困惑吗？

脚本通过调用StartExample()的body标记的onload属性启动

  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

这不是模仿 javascript 延迟的方式。而是使用 window.setTimeout() 像这样:

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

你所做的就是阻塞，这在 JavaScript 中几乎总是不好的。