遍历网格的递归函数变得疯狂

时间:2015-08-08 18:40:50

标签: javascript jquery recursion

当用户点击表格中的一个块时(见截图)我想找到所有相同颜色的相邻块。我试图递归地执行此操作,但是如果我尝试使用超过三个块,它有时会发疯并且一遍又一遍地调用它直到程序崩溃。

据我所知,对象被添加到数组中,但不知怎的,我的测试失败了,并且反复添加相同的对象。

对问题可能是什么以及如何解决问题的任何见解都会非常有用!

这里是screenshot

这是用户点击块时调用的函数:

var $matchArray;
$('.block').click(function () {

    $matchArray = [$(this)];

    var $colorClass;

    if ($(this).hasClass('red')) {
        $colorClass = 'red';
    } else if ($(this).hasClass('green')) {
        $colorClass = 'green';
    } else if ($(this).hasClass('blue')) {
        $colorClass = 'blue';
    } else {
        $colorClass = 'error';
    }

    findAllSameColorNeighbours($(this), $colorClass);

});

这是递归方法:

findAllSameColorNeighbours = function ($this, $colorClass) {

    $this.css('border-style', 'solid');

    //LEFT
    var $leftBlock = isLeftBlockSameColor($this, $colorClass);
    if ($leftBlock != null) {
        if (!(arrayContains($matchArray, $leftBlock))) {
            $matchArray.push($leftBlock);
            findAllSameColorNeighbours($leftBlock, $colorClass);
        }
    }

    //ABOVE
        //same as for LEFT
    //RIGHT
        //same as for LEFT
    //BELOW
        //same as for LEFT
}

这就是我找到相邻单元格的方法,据我所知,这些工作得很好。我对每个方向都有一个:

isLeftBlockSameColor = function ($block, $color) {
    var $this = $block;
    var $tr = $this.parent().parent();
    var col = $tr.children().index($this.parent().prev());
    var $leftBlock = $this.parent().siblings().eq(col).children();
    var $blockClassMatch = $leftBlock.hasClass($color);

    if ($blockClassMatch) {
        return $leftBlock;
    }
    else {
        return null;
    }
};

以下是一些帮助方法,可以确定对象是否已存在于数组中。我使用行和单元格的索引来创建一种纬度和长度的东西。

arrayContains = function ($array, $object) {

    for (i = 0; i < Array.length; i++) {
        if (compareIndex($array[i], $object)) {
            say('true');
            return true;
        }
    };
    return false;
};

compareIndex = function ($obj1, $obj2) {

    if ((getRowIndex($obj1)) === (getRowIndex($obj2)) {
        if ((getCellIndex($obj1)) === (getCellIndex($obj2)) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }

};

getCellIndex = function ($this) {
    var $tr = $this.parent().parent();
    var index = $tr.children().index($this.parent());
    return index;
};

getRowIndex = function ($this) {
    var $tr = $this.parent().parent();
    var index = $tr.index();
    return index;
};

1 个答案:

答案 0 :(得分:0)

arrayContains功能存在错误。循环只会迭代一次,因为Array.length等于1(我用chrome浏览器测试过,但我不知道为什么)。您应该使用$array.length代替。

arrayContains = function ($array, $object) {
        //for (i = 0; i < Array.length; i++) {
        for (i = 0; i < $array.length; i++) {
            if (compareIndex($array[i], $object)) {
                say('true');
                return true;
            }
        };
        return false;
    };