Javascript 尝试在画布中延迟循环浏览图像

我有25张图片，我想很快地展示出来，有点像没有效果的幻灯片。我的图像命名为0到26

我已经尝试为延迟设置for循环和setTimeout，但是setTimeout只在for循环的末尾运行，在我的检查点显示I=25

JS:

函数startAnimation（）{
对于（var i=0；i
//首先将图像预加载到数组中，以获得更平滑的动画效果
函数getImages（回调）{
var imgs=[]，
已加载=0，
长度=25，
我
对于（i=0；i
不要使用setTimeOut和for循环，最好像这样使用setInterval

var i = 0,
    img;

function startAnimation() {
    if (i >= 24) {
        clearInterval(timer); // or i = 0;
    }
    i++;
    img = new Image();
    img.src = 'images/canvas/' + [i] + '.jpg';
    img.onload = function () {
        ctx.drawImage(img, 0, 0, 850, 194);
    };

    alert('CP. In setTimeout. i= ' + i);

    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear image after 1 sec, loop to show next.
    alert('CP outside. i = ' + i);
}

var timer = setInterval(startAnimation, 1000);

基于以下代码片段：

//clear image after 1 sec, loop to show next.

您似乎误解了
setTimeout
的工作原理。
setTimeout
函数在返回之前不会等待。它会立即返回，并安排传递给它的代码/函数在以后执行（在您的情况下为1秒）。因此，循环所做的是创建25个设置超时，所有设置超时在循环执行后1秒同时执行

有两种解决方案。一种是每一秒比另一秒晚创建25个设置超时：

for(var i=0; i<25; i++){
    setTimeout(function(){/* ... */}, 1000 * i);
}

第二种形式更常见


除了setTimeout问题之外，您还需要了解闭包在循环中的工作方式，因为在您的循环中，所有setTimeout都将以
i=24
的值执行，而不是
i
的值1到24

见：

var i = 0,
    img;

function startAnimation() {
    if (i >= 24) {
        clearInterval(timer); // or i = 0;
    }
    i++;
    img = new Image();
    img.src = 'images/canvas/' + [i] + '.jpg';
    img.onload = function () {
        ctx.drawImage(img, 0, 0, 850, 194);
    };

    alert('CP. In setTimeout. i= ' + i);

    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear image after 1 sec, loop to show next.
    alert('CP outside. i = ' + i);
}

var timer = setInterval(startAnimation, 1000);

//clear image after 1 sec, loop to show next.

for(var i=0; i<25; i++){
    setTimeout(function(){/* ... */}, 1000 * i);
}

function foo (i) {
    /* ... */
    if (i >= 0) {
        setTimeout(foo(i-1),1000);
   }
}

foo(24);