Javascript setTimeout 在 for 循环中不起作用

标签 javascript html function settimeout

我必须每秒更换一张图片的来源。我有一个 for 循环,其中调用了一个有超时的函数。我在 stackOverflow 上读到过它,但它不起作用。有人可以告诉我我可以解决什么问题吗?我一直在为此苦苦挣扎,我想承认的更多。谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        function changeImage(k) {
            setTimeout(function(){
              document.getElementById("img").src = k + ".png"; alert(k  );}, 1000);
        }
        function test() {
            for (var k = 1; k <= 3; k++) {
                changeImage(k);

            }
        }
    </script>
</head>

<body>
    <div id="main_img">
        <img id="img" src="http://placehold.it/110x110">
    </div>
    <input type="button" style="width: 200px" onclick="test()" />
</body>

最佳答案

在您的代码中,您一次设置了所有超时。因此,如果您将它们设置为 all 一秒后它们将在一秒后all 触发。

您已经传入了索引 k,因此只需将时间参数乘以 k

setTimeout(function(){
  document.getElementById("img").src = k + ".png";
  alert(k);
}, k * 1000);
// ^ added

关于Javascript setTimeout 在 for 循环中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20810053/

相关文章:

javascript - Youtube API - 在视频中的特定时间调用函数

html - 如何在右侧裁剪图像以匹配包含元素的宽度?

javascript - 使文本在移动设备上可见,在桌面设备上不可见

javascript - 为什么未将此JavaScript函数添加到我的属性中?

python - 类型错误 : endturn() missing 1 required positional argument: 'self'

javascript - 使用循环删除 JSON 中的重复值

javascript - 为什么 removeChild 不删除元素?

r - 使用 R Lapply 和函数参数列表迭代函数

javascript - jsfiddle如何标记代码?有图书馆吗?

html - CSS 中的重叠文本 - 如何更改它?