Устранение бесконечной ошибки петли

Question

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

var fruits = ["fruit1.png", "fruit2.png", "fruit3.png", "fruit4.png"]; 
var monsterReady1 = true; 
var draw = function() { 
    for (var i = 0; i < fruits.length; i++) { 
     monsterImage1 = new Image(); 
     monsterImage1.onload = function() { 
      monster1.x = (Math.random() * (canvas.width - 100)); 
      monster1.y = (Math.random() * (canvas.height - 100)); 
      ctx.drawImage(this, monster1.x, monster1.y); 
     }; 
     monsterImage1.src = fruits[i]; 
    } 
}; 

var render = function() { 
    if (monsterReady1) { 
     draw(); 
    } 

    var main = function() { 
     update(); 
     render(); 
     requestAnimationFrame(main); 
    }; 

Answer 1

Вы рекурсивен main() функция. Это нормальное поведение requestAnimationFrame(). Нормально называть эту функцию бесконечной для рисования холста в каждом кадре.

Существует также рекурсия, когда выполняется render(). Вам не нужно вызывать рендер снова и снова. Раздайте делают вызов от render() тела

var render = function(){ 
    if (monsterReady1) { 
     draw(); 
    } 

    var main = function() { 
     update(); 
     render();       // THIS is error. You should not call render again 
     requestAnimationFrame(main);   // This will call main function infinite loop. Expected. 
    } 
}; 

//render();         // Better to call it here 

Кстати в коде вы предоставляете есть ошибка синтаксиса. Вы пропустили одну закрывающую скобу