javascript - JavaScript 页面导致计算机无响应

Question

我对 JavaScript 完全陌生，所以请耐心等待

我一直在按照教程在 JavaScript 中显示文件夹中的图像，但是当我添加迭代它的脚本时，会导致查看页面的计算机完全锁定

我的标签中包含以下内容：

var canvas = document.getElementById("canvas");
var graphics_context = canvas.getContext("2d");

var rightPressed = false;
var leftPressed = false;
var currentpage = 0;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if ((e.key == "Right" || e.key == "ArrowRight") && !rightPressed) {
        rightPressed = true;
        currentpage++;
    } 
    else if ((e.key == "Left" || e.key == "ArrowLeft") && !leftPressed) {
        leftPressed = true;
        currentpage--;
    }
}
        
function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    } 
    else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}
        
function draw() {
    var img = new Array();
            
    for(let i = 0; true; i++) {
        try {
            var image = new Image();
            image.src = "img/" + i + ".jpg"; 
            img[i] = image;
        } 
        catch(err) {
            break;
        }
    }

    if(currentpage <= 0)
        currentpage = 0;

    if(currentpage >= img.length)
        currentpage = img.length - 1;

    ctx.drawImage(img[currentpage], 0, 0, 800, 800);
}
        
setInterval(draw, 10);

我确实意识到在循环中从文件夹中读取效率非常低，但我真的不明白它会如何导致我的整个 PC 锁定（它与运行页面的 PC 是单独的 PC）

任何帮助表示赞赏！

标签： javascriptcanvas