Javascript 每次递归调用函数之间的延迟

我正在尝试为一个个人项目构建一个迷宫生成器。我有一个递归的深度优先搜索函数，它递归地遍历网格中的每个单元格，检查它是否有未访问的邻居，然后用下一个邻居再次调用递归函数。它可以很好地生成迷宫，但我想在每次调用递归函数之间添加一个延迟，这样我就可以在迷宫访问每个单元格时为其创建动画。使用chrome调试器，它似乎在第一次迭代中执行1s延迟，然后停止等待，并从等待延迟一次又一次地跳回到函数的开头，而从不继续。我做错了什么

这是递归函数和延迟函数：

async function recursiveDFS(currentCell) {
    await delay(1000);
    highlightCell(currentCell);
    currentCell.visited = true;
    var [next, direction] = getNextNeighbor(currentCell);

    while(typeof(next) != 'undefined') {
        removeWall(currentCell, next, direction);
        highlightCell(next);
        recursiveDFS(next);
        [next, direction] = getNextNeighbor(currentCell);
    }
}

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

下面是完整的javascript代码：

"use strict"

// declare globals
const numCols = 10;
const numRows = 10;
const cellSize = 50;
var grid = [];

// create canvas
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = numCols * cellSize;
canvas.height = numRows * cellSize;
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
var context = canvas.getContext('2d');

function setup() {
    createGrid();
    const start = grid[0][0]; // start at top left cell
    const end = grid[1][1];
    recursiveDFS(start);
}

class Cell {
    constructor(col, row) {
        this.col = col;
        this.row = row;
        this.neighbors = {};
        this.walls = {
            top: true,
            right: true,
            bottom: true,
            left: true
        };
        this.visited = false;
    }

    setNeighbors() {
        //top
        if(this.row - 1 >= 0) {
            this.neighbors.top = grid[this.col][this.row - 1]; 
        }
        //right     
        if (this.col + 1 < numCols) {
            this.neighbors.right = grid[this.col + 1][this.row];
        }
        //bottom
        if (this.row + 1 < numRows) {
            this.neighbors.bottom = grid[this.col][this.row + 1];
        }
        //left
        if (this.col - 1 >= 0) {
            this.neighbors.left = grid[this.col - 1][this.row];
        }
    }
}

// create 2d array of Cell objects
        // indexing as grid[col][row]
        // grid = [[(0,0), (1,0)], 
        //         [(0,1), (1,1)]]
function createGrid() {
    for (var col = 0; col < numCols; col++) {
        var colArr = []
        for (var row = 0;  row < numRows; row++) {
            var cell = new Cell(col, row);
            colArr.push(cell);
            drawGridLines(cell);
        }
        grid.push(colArr);
    }

    for (var row = 0;  row < numRows; row++) {
        for (var col = 0; col < numCols; col++) {
            grid[col][row].setNeighbors();
        }
    }
}

// return single neighbor randomized from all possible neighbors
function getNextNeighbor(cell) {
    if (cell.neighbors) {
        var neighbors = [];
        for (var neighbor in cell.neighbors) {
            if (cell.neighbors[neighbor].visited === false){
                neighbors.push([cell.neighbors[neighbor], neighbor]);
            }
        }  
    } 
    if(neighbors.length > 0) {
        return neighbors[Math.floor(Math.random() * neighbors.length)]; 
    } else {
        return [undefined, undefined];
    }
}

function delay(ms) {
    return new Promise(resolve => {
        console.log("waiting...");
        setTimeout(resolve, ms)
    });
} 

async function recursiveDFS(currentCell) {
    await delay(1000);
    highlightCell(currentCell);
    currentCell.visited = true;
    var [next, direction] = getNextNeighbor(currentCell);

    while(typeof(next) != 'undefined') {
        removeWall(currentCell, next, direction);
        highlightCell(next);
        recursiveDFS(next);
        [next, direction] = getNextNeighbor(currentCell);
    }
}

function highlightCell(cell) {
    context.globalCompositeOperation='destination-over'; // fill rect under existing grid
    const topLeft = [(cell.col) * cellSize, (cell.row) * cellSize];
    context.fillStyle = '#FF0000';
    context.fillRect(topLeft[0], topLeft[1], cellSize, cellSize);
}

function removeWall(cell1, cell2, direction) {
    switch (direction) {
        case 'top':
            cell1.walls.top = false;
            cell2.walls.bottom = false;
            break;
        case 'right':
            cell1.walls.right = false;
            cell2.walls.left = false;
            break;
        case 'bottom':
            cell1.walls.bottom = false;
            cell2.walls.top = false;
            break;
        case 'left':
            cell1.walls.left = false;
            cell2.walls.right = false;
            break;
    }
    redrawGrid();
}

function redrawGrid() {
    context.clearRect(0, 0, numCols * cellSize, numRows * cellSize); // clear canvas
    for (var col = 0; col < numCols; col++) {
        for (var row = 0;  row < numRows; row++) {
            drawGridLines(grid[col][row]);
        }
    }
}

function drawGridLines(cell) {
    const topLeft =     [ cell.col         * cellSize,  cell.row          * cellSize];
    const topRight =    [(cell.col + 1)    * cellSize,  cell.row          * cellSize];
    const bottomLeft =  [ cell.col         * cellSize, (cell.row + 1)     * cellSize];
    const bottomRight = [(cell.col + 1)    * cellSize, (cell.row + 1)     * cellSize];

    context.lineWidth = 2;

    //draw top line
    if(cell.walls.top){
        context.beginPath();
        context.moveTo(topLeft[0], topLeft[1]);
        context.lineTo(topRight[0], topRight[1]);
        context.stroke();
    }

    //draw right line
    if(cell.walls.right) {
        context.beginPath();
        context.moveTo(topRight[0], topRight[1]);
        context.lineTo(bottomRight[0], bottomRight[1]);
        context.stroke();
    }

    //draw bottom line
    if(cell.walls.bottom) {
        context.beginPath();
        context.moveTo(bottomRight[0], bottomRight[1]);
        context.lineTo(bottomLeft[0], bottomLeft[1]);
        context.stroke();
    }

    //draw left line
    if(cell.walls.left) {
        context.beginPath();
        context.moveTo(bottomLeft[0], bottomLeft[1]);
        context.lineTo(topLeft[0], topLeft[1]);
        context.stroke();
    }
}


setup();

“使用严格的”
//声明全局
常数numCols=10；
常数numRows=10；
常数cellSize=50；
var网格=[]；
//创建画布
var canvas=document.createElement（'canvas'）；
canvas.id='canvas'；
canvas.width=numCols*单元格大小；
canvas.height=numRows*单元格大小；
var body=document.getElementsByTagName（“body”）[0]；
body.appendChild（画布）；
var context=canvas.getContext（'2d'）；
函数设置（）{
createGrid（）；
const start=grid[0][0]；//从左上角单元格开始
const end=网格[1][1]；
递归dfs（start）；
}
类单元{
构造函数（列，行）{
this.col=col；
this.row=行；
this.neights={}；
这是一个很好的例子{
托普：没错，
对:对，
底部：是的，
左：对
};
this.visted=false；
}
(){
//顶
如果（this.row-1>=0）{
this.neights.top=grid[this.col][this.row-1]；
}
//对
if（this.col+1=0）{
this.neights.left=grid[this.col-1][this.row]；
}
}
}
//创建单元对象的二维数组
//索引为网格[col][row]
//网格=[（0,0），（1,0）]，
//         [(0,1), (1,1)]]
函数createGrid（）{
for（var col=0；col0）{
返回邻居[Math.floor（Math.random（）*neights.length）]；
}否则{
返回[未定义，未定义]；
}
}
功能延迟（毫秒）{
返回新承诺（解决=>{
console.log（“等待…”）；
设置超时（解析，毫秒）
});
} 
异步函数recursiveDFS（currentCell）{
等待延迟（1000）；
高亮度电池（currentCell）；
currentCell.visited=true；
var[next，direction]=getNextNeighbor（currentCell）；
while（typeof（next）！=“未定义”）{
removeWall（currentCell，next，direction）；
highlightCell（下一个）；
递归dfs（下一步）；
[下一步，方向]=getNextNeighbor（currentCell）；
}
}
功能highlightCell（单元）{
context.globalCompositeOperation='destination-over'；//在现有网格下填充rect
const topLeft=[（cell.col）*cellSize，（cell.row）*cellSize]；
context.fillStyle='#FF0000'；
fillRect（左上[0]，左上[1]，cellSize，cellSize）；
}
功能移除墙（单元1、单元2、方向）{
开关（方向）{
案例“顶部”：
cell1.walls.top=假；
cell2.walls.bottom=假；
打破
案例“正确”：
cell1.walls.right=假；
cell2.walls.left=假；
打破
案例“底部”：
cell1.walls.bottom=假；
cell2.walls.top=假；
打破
案例“左”：
cell1.walls.left=假；
cell2.walls.right=假；
打破
}
重绘网格（）；
}
函数重画网格（）{
context.clearRect（0,0，numCols*cellSize，numRows*cellSize）；//清除画布
for（var col=0；colasync function recursiveDFS(currentCell) {
        await delay(1000);
        highlightCell(currentCell);
        currentCell.visited = true;
        var [next, direction] = getNextNeighbor(currentCell);
    
        while(typeof(next) != 'undefined') {
            removeWall(currentCell, next, direction);
            highlightCell(next);
            await recursiveDFS(next);
            [next, direction] = getNextNeighbor(currentCell);
        }
    }