javascript - 如何使用setTimeout来延迟循环中的增量计数器？

<分区>

我想使用 setTimeout 来延迟循环中的增量计数器，以便每秒钟更改一次图片。我尝试延迟 updatePic() 使用 setTimeout 但它也不起作用。请帮忙。谢谢。

我的JS代码:

function picAnimation() {
    //var pic = document.getElementById('pic').src;
    for(i = 2; i < 25; ) {  
        updatePic(i);       
        setTimeout(function() {increment(i);} , 1000);
    }
}

function updatePic(i) {
    if(i > 9) {
        document.getElementById('pic').src = "./animation/0" + i + ".png";
    } else {
        document.getElementById('pic').src = "./animation/00" + i + ".png";
    }
}

function increment(i) {
    i++;
}


picAnimation();

我的html代码:

<center><img id = "pic" src="./animation/001.png" alt="N/A" width="800" height="300"></center>

最佳答案

在这种情况下，for 循环不是正确的语句。循环不等待 setTimeout 完成，几乎立即调用 updateLoop 和 setTimeout 23 次。 setTimeout 是一个函数，它会在设定的毫秒数后调用第一个参数中的函数。

另外，自增函数不会改变i的值； JS 复制数据，递增副本，然后丢弃它。类似的事情在 C++ 中是可能的，但在 JS 中则不行。

您应该改用 setTimeout 来调用 picAnimation。

function picAnimation(i) {
    updatePic(i);
    if (i < 25)
        setTimeout(function() {picAnimation(i + 1)}, 1000);
}
picAnimation(2);

关于javascript - 如何使用setTimeout来延迟循环中的增量计数器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50278740/

上一篇：javascript - 如何创建谷歌标签管理器触发器

下一篇：javascript - 在我使用平移功能之前，我的 Hammer JS 不会注册我的点击处理程序

javascript - 打开 Modal 并更改 URL，而不更改 AngularJS 中的 View

javascript - Firefox 扩展中的元素高度和位置

javascript - Web 服务使用 jQuery post JSON 接收 null

javascript - 在 Javascript 中显示基于数字范围的图像

jquery - 谷歌地图 v3 的 setinterval 或 settimeout

javascript 设置超时();不适用于 linux (firefox)

javascript - 等待功能完成后再开始

javascript - 强制定时更新 CSS 文件

javascript - 我怎样才能让我的页面只刷新一次？