為什么這個遞歸函數會給我一個“超出最大調用堆棧大小”的錯誤？

Question

我正在創建一個帶有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);
    }   

}

Answer 1

實際上在第二次看，我看到你的代碼的問題，它確實有無限的遞歸！

假設你從x = 1開始，x可以從0到2.你先左轉，然后遞歸調用函數。 該功能最終會向右移動！ 那個循環將永遠重復。 您需要跟蹤您訪問過的位置，或者將遞歸函數傳遞給不繼續的方向，或者沿着這些方向傳遞。

Answer 2

因為它是一個遞歸函數，並且在每個if語句中一次又一次地調用它...該函數沒有基本情況。