Tại sao vòng lặp này gây ra tràn ngăn xếp?

Question

Tôi quyết định lộn xộn xung quanh với jquery và làm cho một trò chơi dựa trên bản đồ dựa trên axonometric đơn giản. Nó ám chỉ một số bản đồ, sau đó có một vấn đề với ngăn xếp. (Đã vượt quá kích thước ngăn xếp cuộc gọi tối đa) Tôi chỉ đang sử dụng màu nền cho lát xếp bây giờ.

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

Trong mỗi lần lặp k, bạn sao chép 2^k mục.

Thay vì nhân bản một phần tử, nó chỉ có thể là dễ dàng hơn để tạo ra một nguyên tố mới mỗi lần:

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

Answer 2

Calling $('.map_piece').clone() nhái tất cả các phần đã được tạo ra cho đến nay. Điều này gây ra sự tăng trưởng theo hàm mũ trong số các phần tử nhân bản mỗi khi vòng lặp chạy. Để làm những gì bạn định làm, hãy giới hạn bản sao chỉ với một phần tử bằng cách sử dụng first().

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