javascript - 循环一组名称，每隔一段时间采取行动

Question

在使用 JavaScript/jQuery 的 HTML 页面中，我有一个图像文件名数组 (arListx)。在该页面上，我有一个名为 show(pict) 的例程，它以某种方式处理图像，然后显示它。

我想通过以特定的时间间隔通过 show(pict) 运行每个图像来模拟幻灯片放映。

到目前为止，我所拥有的最好的运气是显示最终图像(显然，所有图像都通过代码运行，但仅显示最后一个图像)。

根据我对 5226285(settimeout-in-a-for-loop-and-pass-i-as-value)的解释，我想出了这个:

function doSetTimeout(i) {
  setTimeout(function() { show(arListx[i]); }, 5000);
}
.
.
.
//[main]
for(i=0; i<arListx.length; i++) {
    doSetTimeout(i);
}
.
.
.
function show(pict) {
    $("#OurPicture").attr('src',pict);
  .
  .
  .
}

我显然做错了什么，希望得到任何建议。

Answer 1

您需要使用 i*5000 逐步设置超时，以便它们显示在 0、5000、10000、15000 等处。您编写的内容只是在 5 秒后调用它们。

function doSetTimeout(i) {
  setTimeout(function() { show(arListx[i]); }, i*5000);
}
.
.
.
//[main]
for(i=0; i<arListx.length; i++) {
    doSetTimeout(i);
}
.
.
.
function show(pict) {
    $("#OurPicture").attr('src',pict);
  .
  .
  .
}