循环内的javascript settimeout并重复答案

【问题标题】：javascript settimeout inside loop and repeat循环内的javascript settimeout并重复
【发布时间】：2016-03-10 14:25:02
【问题描述】：

我有一个包含一些文本描述的数组。我想一次显示一个元素，有时间延迟（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();

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

【问题讨论】：

如果您只想一次显示一个元素，则不需要循环。循环是同步的，setTimeout 是异步的。
另外，请确保在开头进行环绕 if (d >= dataList.length) d = 0;

标签： javascript

【解决方案1】：

您可以改用setInterval()。

setTimeout 在超时时执行一次函数。 setInterval 重复执行函数on和interval

source

代码示例

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()

【讨论】：

比较需要===，而不是>。你永远不希望 d 具有 dataList.length 的值。

【解决方案2】：

正如其他答案正确所说，您需要将函数本身传递给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) 范围内。

【讨论】：

【解决方案3】：

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

【讨论】：

仅此一项不会使代码工作。事实上，你有一个无限循环。
从此创建代码 sn-p ;) 我的浏览器在尝试将您的代码转换为实时 sn-p 时被挂起。

【解决方案4】：

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

所以写setTimeout(ShowList, 10000);

【讨论】：

我试过了，当删除函数的括号时，它从第三个元素（c）开始，然后显示'undefined'
这是一个闭包问题：Closures on MDN
@StefanoNardo：不，不是。好吧，在这种情况下不具体。函数的逻辑根本不正确。