javascript - 排序算法演示中的暂停时间没有按照预想的方式起作用-PHP中国語ネットワークQ&A

我在做一个前端入门的练习，其中有一个task要求如下：
在页面上模拟一个队列，队列的每个元素是一个数字，点击添加按钮后用柱状图高度的形式表现出来
限制输入的数字在10-100
队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来

做到排序功能的时候我准备先实现一个简单的冒泡排序过程，需要一个类似于sleep()的方法一步一步展现冒泡过程，我在论坛上找了一个如下所示的实现方式：

function sleep(d){
  for(var t = Date.now();Date.now() - t <= d;);
}

但运行结果并不如我所预期的是每一个循环都展现出来，而是在总的暂停时间过去后刷新一次页面，展示出排序结果，求指点，谢谢，全部代码如下：
html：

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 1_18</title>
    <style>
      .list-block{
        display:inline-block;
        background-color:red;
        color:white;
        width:18px;
        text-align:center;
        line-height:30px;
        margin:1px;
      }
      #list{
        margin-top:2px;
      }
    </style>
  </head>
<body>
  <p>
    <input type="text" name="num" id="input-label" />
    <input type="button" value="右侧入" id="push-right" />
    <input type="button" value="右侧出" id="pop-right" />
    <input type="button" value="左侧入" id="push-left" />
    <input type="button" value="左侧出" id="pop-left" />
    <input type="button" value="排序" id="sort" />
  </p>
  <p id="list"></p>
  <script src="scripts/task.js"></script>
</body>
</html>

script.js：

let list = document.querySelector("#list");                         //获取队列父元素

function sleep(d){                                                  //暂停函数
  for(var t = Date.now();Date.now() - t <= d;);
}
  
function bubbleSort(){                                              //冒泡排序
  let blockArr = list.childNodes;                                   //获取柱子队列数组
  let arrLength = blockArr.length;                                  //获取数组长度，优化for循环
  
  for(let i=0;i<arrLength;i++){                                     //正向遍历
    for(let j=arrLength - 1;j>i;j--){                               //从数组尾部开始遍历，把较小的元素往前移
      if(blockArr[j].style.height < blockArr[j - 1].style.height){  //当后一元素比前一元素小时
        //setTimeout(function(){list.insertBefore(blockArr[j],blockArr[j - 1])},500);   最开始想要实现暂停的方式
        sleep(500);                                                 //暂停500毫秒
        list.insertBefore(blockArr[j],blockArr[j - 1]);             //交换元素
      }
    }
  }
}
  
function isLegal(num){                                              //输入数字范围判断
  if(num >= 10 && num <= 100)
    return true;
  else
    return false;
}

function getArrLength(){                                            //队列长度范围判断
  let blockArr = document.querySelectorAll(".list-block");
  if(blockArr.length <= 60){
    return false;
  }else{
    return true;
  }
}

function rightInput(){                                              //队尾插入元素
  let num = document.querySelector("#input-label").value;           //获取输入值
  console.log(parseInt(num));                                       //测试输出，下同
  console.log(!isNaN(num));
  if(getArrLength()){                                               //判断队列长度是否超长
    alert("元素数量超过限制");
  }else if(!isNaN(num) && isLegal(num)){                            //输入数字检测
    let newBlock = document.createElement("p");                   //新建柱子p
    newBlock.setAttribute('class','list-block');                    //添加样式
    newBlock.style.height = num;                                    //设置高度属性
    list.appendChild(newBlock);                                     //添加为#list元素的子节点
  }else{
    alert("请输入10-100之间的数字！");                              //弹出提示
  }
}

function rightPop(){                                                //队尾出队列
  alert(list.lastChild.style.height);                               //按照要求弹出删除元素的长度
  //console.log(list.lastChild..style.height);
  list.removeChild(list.lastChild);                                 //删除队尾元素
}

function leftInput(){                                               //队首入队列
  let num = document.querySelector("#input-label").value;
  console.log(parseInt(num));
  console.log(!isNaN(num));
  if(getArrLength()){
    alert("元素数量超过限制");
  }else if(!isNaN(num) && isLegal(num)){
    let newBlock = document.createElement("p");
    newBlock.setAttribute('class','list-block');
    newBlock.style.height = num;
    list.insertBefore(newBlock,list.childNodes[0]);
  }else{
    alert("请输入10-100之间的数字！");
  }
}

function leftPop(){                                                 //队首出队列
  alert(list.firstChild.style.height);
  //console.log(list.lastChild..style.height);
  list.removeChild(list.firstChild);
}

function init() {
  let pushRight = document.querySelector("#push-right");            //绑定右侧入按钮点击事件
  pushRight.addEventListener("click",rightInput);
  let popRight = document.querySelector("#pop-right");              //绑定右侧出按钮点击事件
  popRight.addEventListener("click",rightPop);
  let pushLeft = document.querySelector("#push-left");              //绑定左侧入按钮点击事件
  pushLeft.addEventListener("click",leftInput);
  let popLeft = document.querySelector("#pop-left");                //绑定右侧出按钮点击事件
  popLeft.addEventListener("click",leftPop);
  list.addEventListener("click",function(e){                        //单击柱子本身删除柱子事件代理
    if(e.target && e.target.className == "list-block")
      list.removeChild(e.target);
  });
  let sortBubble = document.querySelector("#sort");                 //绑定排序按钮事件
  sortBubble.addEventListener("click",bubbleSort);
}
/**
 * 初始化函数
 */
init();