CODEWITHSUNDEEP
javascripthtmlcanvasstack-overflow
Raiden
Raiden

Reputation: 411

Maximum call stack size exceeded when split

Trying to duplicate Agar's splitting function but when I call it, the maximum call stack size is exceeded. (JSFiddle) [note: don't click the canvas because that will trigger the split function)

This is the snippet that causes the overflow:

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
});

It only happens when I push something into this.cells. Modifying this.cells in any other way or pushing into other arrays or anything else works fine. Note that pushing into this.cells outside of the for loop it's currently in works fine. (doesn't produce desired effect but doesn't cause an overflow like the current one does)

Why does it cause an overflow and how would I prevent it and get the split function to work properly?

Upvotes: 4

Views: 1635

Answers (1)

fuyushimoya
fuyushimoya

Reputation: 9813

At this line in split:

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

It'll get the newest length of cell in each iteration, and as you put something into it, the i can never exceed the length, so it just loop forever.

Use:

// 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++) {

to make a temp copy of length to prevent this. or

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

Start the iteration at end of array.

By the way, to display correct split result, 

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
});

Should change to 

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
});

See jsfiddle, reverse ver.

Upvotes: 3

Related Questions