对无限循环错误进行故障排除

Troubleshooting an infinite loop error

本文关键字：故障 排除 无限循环 错误      更新时间：2023-09-26

我正在尝试以随机x，y在画布上绘制一组图像，但它给了我一个无限循环......这是我的代码 

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

你在main()函数中有递归。这是requestAnimationFrame（）的正常行为。调用该函数无限来绘制每一帧的画布是正常的。

执行render()时也有递归。您不需要一次又一次地调用 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

顺便说一下，在您提供的代码中存在语法错误。您错过了一个右括号

相关文章：