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

标签 javascript recursion promise settimeout delay

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

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();

最佳答案

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);
            await recursiveDFS(next);
            [next, direction] = getNextNeighbor(currentCell);
        }
    }
当你调用 recursiveDFS(next) 时添加等待;这样它将等待函数完成,然后再进行下一步,因为您已将函数设置为异步。

关于javascript - 每次递归调用函数之间的延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63704135/

相关文章:

javascript - 打开 Ember 服务时出错

javascript - 类型错误 : Cannot read property 'push' of undefined D3?

Haskell 排列库函数 - 请澄清一下?

javascript - 获取 : Reject promise with JSON error object

javascript - jquery如何将参数传递给回调函数到管道中

javascript - 在 parse.com 中未找到保存 XMLHttpRequest 的 NodeJS 定义

javascript - 为什么我的错误没有在我的快速回复中返回?

这个阿克曼函数的实现可以称为尾递归吗?

Linux 'find' 仅针对当前文件夹和指定文件夹

javascript - Q Promise同步应答