为什么这个递归函数给我一个“最大调用堆栈大小超过”错误

Why does this recursive function get me a "Maximum call stack size exceeded" error?

本文关键字：堆栈 调用 错误 一个 递归函数 为什么      更新时间：2023-09-26

我正在用HTML画布创建一个绘画应用程序，我正在尝试实现一个"油漆桶"工具，该工具将检测任何与被点击的像素具有相同颜色的相邻像素，并使用新颜色填充它。

我得到一个"未捕获的RangeError:最大调用堆栈大小超过"，但我不知道我的逻辑出了什么问题:

function fillTool(){
    theCanvas.mousedown(function(e){
        var baseColor = paintUtilities.getPixelColor(e.offsetX, e.offsetY);
        context.fillStyle = color;
        fillNeighbors(e.offsetX, e.offsetY, baseColor);
    });
}
function fillNeighbors(x, y, baseColor) {
    context.fillRect(x, y, 1, 1);
    if (x > 0 && paintUtilities.getPixelColor(x - 1, y) === baseColor) {
        fillNeighbors(x - 1, y, baseColor);
    }
    if (y > 0 && paintUtilities.getPixelColor(x, y - 1) === baseColor) {
        fillNeighbors(x, y - 1, baseColor);
    }
    if (x < theCanvas.attr("width") - 1 && paintUtilities.getPixelColor(x + 1, y) === baseColor) {
        fillNeighbors(x + 1, y, baseColor);
    }   
    if (y < theCanvas.attr("height") - 1 && paintUtilities.getPixelColor(x, y + 1) === baseColor) {
        fillNeighbors(x, y + 1, baseColor);
    }   
}

实际上在第二看，我看到你的代码的问题，它确实有无限递归!

假设从x = 1开始，x可以从0到2。首先向左，递归地调用函数。这个函数最终会向右移动!然后这个循环就会永远重复下去。你需要跟踪你访问过的地方，或者给递归函数传递一个不继续的方向，或者类似的东西。

因为它是一个递归函数，在每个if语句中你一次又一次地调用它…

相关文章：