Javascript 我如何优化这个泛洪填充算法？需要的建议

我对下面的代码有点不熟悉

以下是js代码：

function floodFill(x, y, selectedColor, grayColor) {
  if (x < 0 || x >= 600) return;
  if (y < 0 || y >= 400) return;
  let square = $('.blockattribute').filter(function(ind, el) {
    return $(el).css('left') == x + 'px' && $(el).css('top') == y + 'px'
  });
  let squareColor = square.css('background-color');
  if (squareColor === grayColor || squareColor === selectedColor) {
    square.removeClass().addClass('blockattribute gray');
    floodFill(x + 20, y, selectedColor, grayColor);
    floodFill(x, y + 20, selectedColor, grayColor);
    floodFill(x - 20, y, selectedColor, grayColor);
    floodFill(x, y - 20, selectedColor, grayColor);
  }
  else {
    return;
  }
}

功能泛光填充（x、y、selectedColor、grayColor）{
如果（x<0 | | x>=600）返回；
如果（y<0 | | y>=400）返回；
let square=$（'.blockattribute'）.filter（函数（ind，el）{
返回$（el）.css（'left'）==x+'px'和&$（el）.css（'top'）==y+'px'
});
让squareColor=square.css（'background-color'）；
如果（squareColor==grayColor | | squareColor===selectedColor）{
square.removeClass（）.addClass（'blockattribute gray'）；
泛光填充（x+20，y，选定颜色，灰色）；
泛光填充（x，y+20，选定颜色，灰色）；
泛光填充（x-20，y，选定颜色，灰色）；
泛光填充（x，y-20，选定颜色，灰色）；
}
否则{
返回；
}
}

我一直在学习javascript/jquery和算法，我几乎已经让这个克隆工作了，除了当我越来越深入网格时，代码就越来越慢。我一直在读有关备忘录的书，并试图在网格上使用它，但我被困在如何处理的问题上。我真正想要的是一点关于如何做到这一点的推动。也许记忆化不是一种方式，也许我可以用其他方式优化我的代码。我目前的想法是，我需要抓住最后一个灰色方块，然后从那里开始。我走对了吗

----编辑------

---

我意识到我可以组合

if/else

操作符来检查匹配的灰色或选定颜色

在Javascript中读取和写入DOM非常昂贵。您也不应该将DOM用作数据源

为了加速算法，将像素数据作为常规Javascript数据离线存储，只操作数据，然后只更新一次可视代码。这样可以最小化DOM操作的数量

---

此外，Javascript不是“尾部调用优化的”，这意味着您不能永远递归，每一级递归都会在一定程度上降低程序的速度。在这种情况下，如果您可以使用非递归泛洪填充算法，它可能会更快。

下一次函数调用是否应该等待上一次函数调用的返回值？嘿，谢谢@guest271314的快速回复。等待最后一个函数返回是什么意思？还没有被处理吗？嘿@guest271314，我真的需要一些帮助，我正试图弄清楚让下一个函数等待上一个函数的返回值到底是什么意思。你是在说这个问题中的事情吗？对调用函数两次或四次的目的是什么？还是函数只调用一次？我对现在的代码做了一些编辑。我调用它四次，因为每次我传递不同的值。我正在检查上方、下方、左侧和右侧空间中的方形颜色。所以我打了四次电话。作为参考，我使用此链接进行解释。“Javascript不是“尾部调用优化”意思是你不能永远递归”尾部调用优化等同于递归吗？谢谢@Andy Ray，那么你是不是得到了这个而不是DOM元素，我必须用Javascript构建一个类似网格的数组，一旦我操作了它，我就可以更新DOM。对吗？丹：对。将视图与数据分开。客人2713：什么？