Question

我有一个小提琴下面的代码。 ColorWalk clone

这是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;
  }
}

我一直在努力学习javascript / jquery和算法，而且我几乎都有这个克隆工作，除了我越来越深入网格，代码越来越慢的事实。我一直在读关于memoization并试图在网格上使用它，但我对如何接近而陷入困境。所有我真正想要的是如何做到这一点。也许memoization不是要走的路，也许我可以通过其他方式优化我的代码。我目前的想法是，我需要抓住最后一个灰色方块，然后从那里开始。我是在正确的轨道上吗？

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

我意识到我可以组合if/else运算符来检查匹配的灰色或所选颜色

Answer 1

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

要加快算法速度，请将像素数据作为常规Javascript数据离线存储，仅操作数据，然后仅更新可视代码一次。这样可以最大限度地减少DOM操作的数量。

此外，Javascript不是“尾调优化”，这意味着你无法永远递归，并且每一级递归都会在一定程度上减慢程序的速度。如果在这种情况下可以使用非递归填充填充算法，则可能会更快。

如何优化此floodFill算法？建议需要

1 个答案: