Javascript 如何在svelte中的for循环迭代之间更新DOM？

我正在用svelte制作一个轮盘赌板。我的想法是创建一个函数

roll（）

，当单击该函数时，将生成一个50-100之间的随机数。roll函数还将迭代每个轮盘赌方块的每个数字，并将其字体大小增加到20px（以显示一个“球”正在滚动该数字）。但是，在for循环完成后，我当前的程序会增加所有数字的字体大小。我希望在下一个数字的字体大小增加之前，每个数字都恢复到原来的字体大小。我查找了这个问题的解决方案，发现有些人使用了“setTimeout1”，但这个解决方案对我来说根本不起作用

这是我的密码

let board=[
{num:35，颜色：“黑色”}，
{num:3，颜色：“红色”}，
{num:26，颜色：“黑色”}，
{num:0，颜色：“绿色”}，
{num:32，颜色：“黑色”}，
{num:15，颜色：“红色”}，
{num:19，颜色：“黑色”}，
{num:4，颜色：“红色”}，
{num:21，颜色：“黑色”}，
{num:2，颜色：“红色”}，
{num:25，颜色：“黑色”}，
{num:17，颜色：“红色”}，
{num:34，颜色：“黑色”}，
{num:6，颜色：“红色”}，
{num:27，颜色：“黑色”}，
{num:13，颜色：“红色”}，
{num:36，颜色：“黑色”}，
{num:11，颜色：“红色”}，
{num:30，颜色：“黑色”}，
{num:8，颜色：“红色”}，
{num:23，颜色：“黑色”}，
{num:10，颜色：“红色”}，
{num:5，颜色：“黑色”}，
{num:24，颜色：“红色”}，
{num:16，颜色：“黑色”}，
{num:33，颜色：“红色”}，
{num:1，颜色：“黑色”}，
{num:20，颜色：“红色”}，
{num:14，颜色：“黑色”}，
{num:31，颜色：“红色”}，
{num:9，颜色：“黑色”}，
{num:22，颜色：“红色”}，
{num:18，颜色：“黑色”}，
{num:29，颜色：“红色”}，
{num:9，颜色：“黑色”}，
{num:7，颜色：“红色”}，
{num:28，颜色：“黑色”}，
{num:12，颜色：“红色”}，
]
功能辊（）{
设square=document.getElementById（“square”）；
for（设i=0；i

轮盘赌！
{#每个板都是c，i}
{c.num}
{/每个}
滚
//对于非苗条用户，这只是创建一个轮盘赌板。

在需要暂停时使用循环是人们经常犯的错误。循环运行速度惊人。你想要的是（相对而言）慢得多的计时。所以，根本不使用循环，而是使用递归调用自身的计时器或间隔计时器

我不知道Svelt，所以这里有一个修改后的示例：

//只需获取一次对所有“数字”的引用
//并不是每次调用该函数
让数字=document.queryselectoral（“div”）；
设计时器=null；//将保留对计时器的引用
功能辊（）{
让wheelCounter=0；//将跟踪绕车轮旋转的次数
让计数器=0；//将跟踪我们使用的号码
//启动一个定时器，定时调用它的回调函数
计时器=设置间隔（函数（）{
if（车轮计数器<3）{
//从最后一个编号中删除样式（如果有最后一个编号）
如果（计数器>0）{
数字[counter-1].classList.remove（“活动”）；
}
//看看我们是否应该继续前进
if（计数器<数字长度）{
numbers[counter++].classList.add（“active”）；//添加所需的样式
}否则{
计数器=0；//重新开始迭代数字
车轮计数器++//调整我们绕着车轮转了多少圈
}
}否则{
clearInterval（计时器）；//取消计时器
}
}，200）；//在需要暂停时使用循环是人们经常犯的错误。循环运行速度非常快。您需要的是（相对而言）慢得多的计时。因此，根本不使用循环，而是使用递归调用自身的计时器或间隔计时器

我不知道Svelt，所以这里有一个修改后的示例：


//只需获取一次对所有“数字”的引用
//并不是每次调用该函数
让数字=document.queryselectoral（“div”）；
让timer=null；//将保留对timer的引用
功能辊（）{
让wheelCounter=0；//将跟踪绕车轮旋转的次数
让计数器=0；//将跟踪我们使用的号码
//启动一个定时器，定时调用它的回调函数
计时器=设置间隔（函数（）{
if（车轮计数器<3）{
//从最后一个编号中删除样式（如果有最后一个编号）
如果（计数器>0）{
数字[counter-1].classList.remove（“活动”）；
}
//看看我们是否应该继续前进
if（计数器<数字长度）{
numbers[counter++].classList.add（“active”）；//添加所需的样式
}否则{
计数器=0；//重新开始迭代数字
车轮计数器++//调整我们绕着车轮转了多少圈
}
}否则{
clearInterval（计时器）；//取消计时器
}
}，200）；//您可以使用它，其中，
勾选
等待DOM更新。

我添加了突出显示的
属性，当设置该属性时，数字将变为粗体

我还添加了
sleep
功能，因此您可以轻松引入延迟

代码


从“svelte”导入{tick}；
让董事会=[
{num:35，颜色：“黑色”}，
{num:3，颜色：“红色”}，
{num:26，颜色：“黑色”}，
{num:0，颜色：“绿色”}，
{num:32，颜色：“黑色”}，
{num:15，颜色：“红色”}，
{num:19，颜色：“黑色”}，
{num:4，颜色：“红色”}，
];
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
异步乐趣
<script>

  import { tick } from "svelte";

  let board = [
    {num: 35, color: "black"},
    {num: 3, color: "red"},
    {num: 26, color: "black"},
    {num: 0, color: "green"},
    {num: 32, color: "black"},
    {num: 15, color: "red"},
    {num: 19, color: "black"},
    {num: 4, color: "red"},
  ];

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async function roll() {
    for (let i = 0; i < board.length; i++) {
      board[i].highlighted = true;
      await tick();
      await sleep(500);
      board[i].highlighted = false;
      await tick();
      await sleep(500);
    }
  }
</script>

<main>
  <h1>Roulette!</h1>
  <div style="display:flex; flex-direction: row;">
    {#each board as c, i}
      <div class="{c.color}" id="square" style="flex:1">
        <p id="number{i++}" style="font-weight: { c.highlighted ? 'bold' : 'normal' };">{c.num}</p>
      </div>
    {/each}
  </div>
  <button on:click={roll}>Roll</button>
</main>