JavaScript 设置超时在循环和重复

javascript settimeout inside loop and repeat

本文关键字：循环 设置 超时 JavaScript      更新时间：2023-09-26

我有一个包含一些文本描述的数组。我想一次显示一个元素，有时间延迟（10 秒）。显示所有元素后，应该重新开始。

var d = 0;
var dataList = ["a","b","c"];//eg:
function ShowList()
{
    do{
       var descrip = dataList[d];
       document.getElementById('section1').innerHTML = descrip;
       d++;
       setTimeout(ShowList(),10000);
    }while(d < dataList.length);
}
ShowList();

我将尝试使用上面的代码，但无法正常工作。

你可以

改用setInterval()。

setTimeout超时执行一次函数。 setInterval 在和间隔上重复执行函数

源

代码示例 

var d = 0,
  dataList = ['a', 'b', 'c'];
setInterval(function() {
  var descrip = dataList[d];
  document.getElementById('section1').innerHTML = descrip;
  d++;
  if (d >= dataList.length) {
    d = 0;
  }
}, 10000);

要停止间隔，请使用clearInterval()

正如其他答案正确所说的那样，您需要将函数本身传递给setTimeout，而不是调用函数。

他们没有说的是，使用循环在这里不起作用，因为它是异步的setTimeout。只需设置元素内容并调用setTimeout：

var d = 0;
var dataList = ["a","b","c"];//eg:
function showList() {
    var descrip = dataList[d];
    document.getElementById('section1').innerHTML = descrip;
    d = (d + 1) % dataList.length;
    setTimeout(showList, 10000);
}
showList();

从头开始，我们使用模运算符，以便d始终在 [0, d.length) 范围内 .

使用 setTimeout(ShowList,10000); 而不是 setTimeout(ShowList(),10000);

在 setTimeout 中，您必须指定函数的名称，而不是应用程序的名称。当你写func()你正在执行函数，结果将作为setTimeout的实际参数传递。例如，如果func()返回 2，则当您编写setTimeout(funct(), 1000)时，就像您在编写 setTimeout(2, 1000) 一样。

因此写setTimeout(ShowList, 10000);

相关文章：