Помощь JavaScript Бесконечная петля? Почему это происходит?

Question

Edit: Вот Pastebin полного кода: http://pastebin.com/EVAyxh2N

Я вставил свой код ниже. Если кто-нибудь сможет понять, почему я получаю бесконечный цикл от этого, мне бы хотелось увидеть! По сути, у меня есть цикл for-loop внутри цикла foor, и это сработало нормально, но я хотел сохранить прямые данные в массиве, чтобы потом получить доступ к нему, поэтому я создал другой цикл for, который обрабатывает записи из array, а затем создает прямоугольники для каждого из них.

// Create custom "tile" object 
function tileObj(x, y, img) { 
    this.x = x; 
    this.y = y; 
    this.img = img; 
} 

// Create empty array to store tile data 
var tiles = []; 

// Create tile-grid, map.grid sized rectangles that will adopt tileset images 
function gridTiles() { 
    for (var x = 0; x <= map.width; x += map.grid) { 
     for (var y = 0; y <= map.height; y += map.grid) { 

      var newTile = new tileObj(x, y, "red"); 
      tiles.push(newTile); 

      for (var z = 0; z < tiles.length; z++) { 
       tile = tiles[z]; 
       ctx.rect(tile.x, tile.y, map.grid, map.grid); 
       ctx.fillStyle = tile.img; 
       ctx.fill(); 
      } 
     } 
    } 
} 
gridTiles(); 

Answer 1

Это может быть бесконечный цикл, если map.grid является <= 0.

Я думаю, что вы хотите z для цикла после того, как вы создали все объекты плитки:

// Create custom "tile" object 
function tileObj(x, y, img) { 
    this.x = x; 
    this.y = y; 
    this.img = img; 
} 

// Create empty array to store tile data 
var tiles = []; 

// Create tile-grid, map.grid sized rectangles that will adopt tileset images 
function gridTiles() { 
    for (var x = 0; x <= map.width; x += map.grid) { 
     for (var y = 0; y <= map.height; y += map.grid) { 

      var newTile = new tileObj(x, y, "red"); 
      tiles.push(newTile); 

     } 
    } 
    for (var z = 0; z < tiles.length; z++) { 
     tile = tiles[z]; 
     ctx.rect(tile.x, tile.y, map.grid, map.grid); 
     ctx.fillStyle = tile.img; 
     ctx.fill(); 
    } 
} 
gridTiles(); 

FYI, я не думаю, что это был бесконечный цикл, если map.grid не было <= 0. Кажется вероятным, что это был очень, очень медленно исполняемый цикл, потому что вы ездили на велосипеде по каждой плите много раз.

Answer 2

Как gridTiles получает доступ к объекту карты? Это в области окна или документа?

В любом случае, убедитесь, что значение сетки положительное, или вы войдете в бесконечный цикл.

function gridTiles(){ 
    var grid = map.grid; //assume you have access to it 
    if (grid<=0){ 
    console.warn('Invalid grid width'); 
    return; 
    } 

    // continue your function 

}