Question

尝试复制Agar的分割功能，但是当我调用它时，会超出最大调用堆栈大小。（JSFiddle）[注意：不要单击画布，因为这会触发分割功能）

这是导致溢出的代码段：

this.cells.push({
    coords: {
        x: this.cells[i].coords.x + 50,
        y: this.cells[i].coords.y
    },
    mass: this.mass,
    velocity: {
        x: this.cells[i].velocity.x,
        y: this.cells[i].velocity.y
    },
    hue: this.cells[i].hue
});

当我将某些东西推入this.cells时，只发生。以任何其他方式修改this.cells或推入其他数组或其他任何其他工作正常。请注意，在for循环之外推入this.cells它当前正常工作。（不会产生预期效果，但不会像当前那样造成溢出）

为什么它会导致溢出？如何防止它并使分割功能正常工作？

Answer 1

split中的这一行：

for (var i = 0; i < this.cells.length; i++)

每次迭代都会得到最新的length cell，当你把东西放入其中时，i永远不会超过长度，所以它只是永远循环。

使用：

// Get the init value of the length, 
// so push something into this.cells won't make it unable to end.
var length = this.cells.length;
for (var i = 0; i < length; i++) {

制作长度的临时副本以防止这种情况发生。或

// Start at the end of the array, if the order is not a concern.
for (var i =  this.cells.length - 1; i >= 0; i--)

在数组末尾开始迭代。

顺便说一下，要显示正确的分割结果，

this.cells.push({
    coords: {
        x: this.cells[i].coords.x + 50,
        y: this.cells[i].coords.y
    },
    mass: this.mass,
    velocity: {
        x: this.cells[i].velocity.x,
        y: this.cells[i].velocity.y
    },
    hue: this.cells[i].hue
});

应该改为

this.cells.push({
    coords: {
        x: this.cells[i].coords.x + 50,
        y: this.cells[i].coords.y
    },

    // this.mass is undefined, I believe you intend to get the current cell's mass here.
    mass: this.cells[i].mass,

    velocity: {
        x: this.cells[i].velocity.x,
        y: this.cells[i].velocity.y
    },
    hue: this.cells[i].hue
});

请参阅jsfiddle，reverse ver.

拆分时超出最大调用堆栈大小

1 个答案: