如何让JavaScript的for循环等待div点击后再继续执行

我需要实现依次显示多个弹窗的功能，规则如下：

• 仅当前弹窗关闭后，才会显示下一个弹窗
• success类弹窗：10秒后自动关闭
• warning类弹窗：保持显示，直到用户点击右上角的“X”手动关闭

要求必须用for循环遍历存储弹窗的数组，但循环无法“暂停”等待用户操作，需等所有弹窗处理完成后才停止。不能使用jQuery，也偏好不使用id。之前尝试setTimeout没成功，遇到了以下问题：

简化后的代码 #

HTML

<!-- 每个弹窗结构一致，仅父div的type类（success/warning）不同 -->
<div class="box success">
    <!-- 弹窗内容区域 -->
    <div class="box-close"> X </div>
</div>
<div class="box warning">
    <!-- 弹窗内容区域 -->
    <div class="box-close"> X </div>
</div>

CSS

.box {
    display: none;
}

JavaScript

// 页面上所有弹窗div存入allBoxes数组
const allBoxes = document.querySelectorAll('.box');

// 尝试逐个显示弹窗
for (let j = 0; j < allBoxes.length; j++) {
   showBox(allBoxes[j]); 
}

function showBox() {
   const box = allBoxes[j];
   box.style.display = "block";
   
   if (box.classList.contains("success")) {       
    setTimeout(removeBox, 10000); 
    // 问题：循环结束后才执行，只会移除数组最后一个div，与弹窗类型无关
    
    // 尝试过的错误写法：
    // setTimeout(removeBox(box), 10000); 
    // 问题：立即执行removeBox，完全不等待10秒
   } else {
      // 期望循环暂停，直到用户点击关闭按钮
      box.querySelector(".box-close").addEventListener("click", removeBox); 
      // 问题：循环继续执行，没有任何暂停效果

      // 尝试过的错误写法：
      // box.querySelector(".box-close").addEventListener("click", removeBox(box)); 
      // 问题：直接立即移除弹窗，和点击事件无关，循环依旧继续
   }
}

function removeBox() {                                   
   box.style.display = "none";  
} 

遇到的具体问题 #

• setTimeout会在循环完全结束后才执行，且只会移除数组最后一个弹窗
• 直接传递removeBox(box)给setTimeout会立即执行移除操作，不会等待设定的时间
• warning类弹窗的点击事件无法让循环暂停，循环会直接遍历完所有弹窗

内容的提问来源于stack exchange，提问作者help