如何在 JavaScript 中的每个 for 循环迭代之间暂停

Question

对不起，如果已经有这样的问题，我还没有找到。

我想用JS取得进展（加载）animation：

   <div class = "load">

     <div id = "load_fill"></div>

     <p id = "percent">0%</p>

   </div>
        

   
   
   <script>
     
     let percent = document.getElementById("percent");
     let load_fill = document.getElementById("load_fill")
     
     
     
     let j = 0;
     
     let fill = ()  => {
       
       j++;

       percent.textContent = `${j}%`;

       load_fill.style.width = `${j}%`
       
     }

     
     for (let i = 0; i < 100; i++){
       
       setTimeout(fill, 200);
       
     }
     
     
   </script>

问题是第一次迭代有延迟，但其他没有；

有没有办法在每次迭代之间进行延迟？

将感谢任何答案。

Answer 1

new Array(100).map((el, ind) => ind).forEach((cur) => setTimeout(fill, (cur + 1) * 200))

在这里，我们首先创建一个范围数组（第一部分），然后将每个 setTimeout 间隔设置为 200 毫秒。