我正在尝试使用canvas在javascript中可视化排序算法？

为了好玩，我试图将排序算法可视化，但我遇到了一个问题

我试图在sort方法中调用draw函数，但浏览器锁定并仅渲染最终排序的数组。我如何将每个排序过程可视化

var CANVAS_WIDTH = window.innerWidth;
var CANVAS_HEIGHT = window.innerHeight;

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d');

canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

context.fillStyle = 'red';
context.fillRect(0,0, CANVAS_WIDTH, CANVAS_WIDTH);

function draw(array){
    context.save();
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.strokeStyle = 'white';
    context.beginPath();
    context.moveTo(0, canvas.height-100);
    context.lineTo(canvas.width, canvas.height-100);
    context.stroke();
    context.restore();
    context.fillStyle = 'white';
    for(let i = 0; i < array.length; i++){
        context.fillRect(100 + 7*i,canvas.height-100,5,-5 * array[i]);
    }
}




let array = []

for(let i = 0; i < 100; i++){
    array.push(100-i);
}
function bubble_Sort(arr){
    let ticks = 0;  
    const speed = 50;
    let size = arr.length;
    for(let i = 0; i < size; i++){
        ticks++;
        for(let j = 0; j < size - 1; j++){
            draw(array);
            if (arr[j] > arr[j+1]){
                let temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    return arr;
}
draw(array);
array = bubble_Sort(array)

var CANVAS\u WIDTH=window.innerWidth；
var CANVAS_HEIGHT=window.innerHeight；
var canvas=document.querySelector（'canvas'）
var context=canvas.getContext（'2d'）；
canvas.width=画布宽度；
canvas.height=画布高度；
context.fillStyle='red'；
fillRect（0,0，画布宽度，画布宽度）；
函数绘制（数组）{
context.save（）；
clearRect（0，0，canvas.width，canvas.height）；
context.strokeStyle='white'；
context.beginPath（）；
context.moveTo（0，canvas.height-100）；
context.lineTo（canvas.width，canvas.height-100）；
stroke（）；
restore（）；
context.fillStyle='white'；
for（设i=0；iarr[j+1]）{
设温度=arr[j]；
arr[j]=arr[j+1]；
arr[j+1]=温度；
}
}
}
返回arr；
}
绘制（数组）；
数组=气泡排序（数组）

您缺少

setTimeout

，您需要在数组的每次更改之间设置一个超时，以便实际看到更改。当前，您的所有更改都已发生，但速度太快，无法看到：）

会是这样的：

绘制数组

等待300毫秒

绘制数组

等待300毫秒

等等

您需要使用

setTimeout

包装draw函数，您需要为超时持续时间指定一个数字，在那里您需要做一些类似的操作：

300*index

---

另外，我可以看到您已经获得了一个

速度

变量，但您没有使用它。

您可以使用

异步

等待

实现这一点：这样您就不必太多地接触现有代码。只需将bubble_Sort函数与关键字

async

异步，并在循环中添加一个

wait delay（）

。然后，

delay

函数应该是一个返回在短延迟内解析的承诺的函数

作为补充说明，您可以稍微加快气泡排序。内部循环不应重新访问已排序的数组部分。每次外循环进行循环时，一个值都会到达数组右端的最终位置，因此内循环可以在到达该位置之前停止

您还可以在绘图上保存一点：仅在执行交换时调用

draw

，因为将相同的情况绘制两次是没有用的

以下是您的代码和这些修改：

//实用程序函数：
让delay=ms=>newpromise（resolve=>setTimeout（resolve，ms））；
//使主函数异步
异步函数冒泡排序（arr）{
//将draw的初始调用移到此处
绘制（数组）；
等待延迟（5）；//arr[j+1]）{
设温度=arr[j]；
arr[j]=arr[j+1]；
arr[j+1]=温度；
//只有在发生变化时才画画
绘制（数组）；
等待延迟（5）//