Why does this loop cause a stack overflow?

Question

I decided to chat with jquery and make a simple axonometric card game. It displays part of the map and then has a stack problem. (Maximum call stack size) I just use the background colors for the tiles at the moment.

Js bin here

var map = [ "g","g","g","s","s", "g","g","s","s","w", "g","g","s","w","w", "g","g","s","w","w", "g","g","s","w","w" ]; var x = 0; var y = 0; var count = 0; var background; function init() { $.each( map, function( key, value ) { x += 30; y += 60; if (count > 4){ x -= 120; y -= 360; count = 0; } if (value == "g"){background = "#00ff00";} if (value == "w"){background = "#0000ff";} if (value == "s"){background = "#ffff00";} $('.map_piece').clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background}); count ++; }); } $('document').ready(function(){ init(); }); 

Answer 1

In each iteration of k, you clone 2 ^ k elements.

Instead of cloning an element, it might be easier to create a new element every time:

 $('<div class="map_piece">') .appendTo('body') .css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background}); 

Answer 2

Calling $('.map_piece').clone() clones all the parts that have been created so far. This leads to an exponential increase in the number of cloned elements each time the cycle runs. To do what you intend to do, restrict the clone to only one element using first() .

 $('.map_piece').first().clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});