如何在JavaScript中重新绘制之前创建延迟？

我是JavaScript新手，我正在尝试创建一个可视化气泡排序算法的程序

其思想是通过fillRect（x，y，x，y）生成不同大小的矩形，并将高度保存到数组中。调用冒泡排序函数，数组通过比较高度对自身进行排序，每次在数组中移动高度时画布都会重新绘制自身

我所做的功能按预期工作。问题是我不知道如何在每次重新绘制之间创建延迟。目前，它会立即排序，您无法看到动画。我想应该使用java中的sleep之类的东西？我想不出来

以下是我目前的代码：

var list=[]；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
var x=4；
对于（i=0；i<38；i++）{
var random=Math.floor（Math.random（）*（400-10）+10）；
bar=ctx.fillRect（x，4，20，随机）；
列表。推送（随机）；
x+=21；
}
函数bubbleSort（）{
for（设i=0；i列表[j+1]）{
设温度=列表[j]；
列表[j]=列表[j+1]；
列表[j+1]=温度；
ctx.clearRect（0，0，c.宽度，c.高度）；
重新油漆（清单）；
}
}
}
}
函数重绘（列表）{
ctx.clearRect（0，0，c.宽度，c.高度）；
设k=4；
for（设i=0；i<38；i++）{
ctx.fillRect（k，4，20，list[i]）；
k+=21；
}
}

气泡排序



气泡排序

您可以制作如下延迟功能：

const delay=ms=>新承诺（resolve=>setTimeout（resolve，ms））；

然后将

bubbleSort

函数更改为

async

，然后在每次迭代后等待几毫秒：

var list=[]；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
const delay=ms=>newpromise（resolve=>setTimeout（resolve，ms））；
var x=4；
对于（i=0；i<38；i++）{
var random=Math.floor（Math.random（）*（400-10）+10）；
bar=ctx.fillRect（x，4，20，随机）；
列表。推送（随机）；
x+=21；
}
异步函数bubbleSort（）{
for（设i=0；i列表[j+1]）{
设温度=列表[j]；
列表[j]=列表[j+1]；
列表[j+1]=温度；
ctx.clearRect（0，0，c.宽度，c.高度）；
重新油漆（清单）；
等待延迟（200）；
}
}
}
}
函数重绘（列表）{
ctx.clearRect（0，0，c.宽度，c.高度）；
设k=4；
for（设i=0；i<38；i++）{
ctx.fillRect（k，4，20，list[i]）；
k+=21；
}
}

气泡排序



气泡排序

使用。要想实现这一点，您必须重新构造两个嵌套的For循环。requestAnimationFrame或setTimeout如何？这实际上不会阻止函数的执行，如果OP只想延迟几毫秒，这是最简单的方法，代码更改最少。但CPU周期的最大值是，因此，这是一个相当棘手的解决办法。当然，最好的解决方案是将所有函数更改为

async

。阻止线程也会阻止渲染。