时间戳

首页 > 解决方案 > 如何使用pureJS循环遍历数组并以500ms的间隔显示每个值？

javascript - 如何使用pureJS循环遍历数组并以500ms的间隔显示每个值？

问题描述

下面的循环基本上循环遍历我的数组，sumFormat然后以间隔显示数组的每个值500ms，这很好，但它一次只显示一次数组值，所以

例如，如果数组包含[1, 2, 3]

我试图弄清楚，但似乎无法正确解决。

for (var i = 0; i < sumFormat.length; i++) {
    (function(i) {
        setTimeout(function() {
            factOut.innerHTML = sumFormat[i];
        }, 500 * i);
    })(i);
}

标签： javascriptarraysloopsintervals

解决方案

与现有的连接innerHTML而不是仅仅分配给它，因为这将覆盖以前存在的任何内容。您也可以使用let而不是var使代码更整洁。此外，由于您只插入text，而不是 HTML 标记，因此最好使用textContent：

const sumFormat = [1, 2, 3, 4, 5];
for (let i = 0; i < sumFormat.length; i++) {
  setTimeout(function() {
    factOut.textContent += ' ' + sumFormat[i];
  }, 500 * i);
}
<div id="factOut"></div>

另一种方法，通过将数组项从 0 连接到当前索引：

const sumFormat = [1, 2, 3, 4, 5];
for (let i = 0; i < sumFormat.length; i++) {
  setTimeout(function() {
    factOut.textContent = sumFormat.slice(0, i + 1).join(' ');
  }, 500 * i);
}
<div id="factOut"></div>

推荐阅读