问如何使用pureJS循环遍历数组并以500 to间隔显示相邻的每个值？
EN

Stack Overflow用户

提问于 2020-02-23 23:42:48

回答 3查看 129关注 0票数 0

下面的循环基本上通过我的数组(即sumFormat )循环，然后用一个500ms间隔显示数组的每个值，这很好，但是它只在一次显示数组值，所以

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

--它显示1然后500ms显示2代替1，
，但我希望它显示1然后显示500ms后面显示2 H 214H 115 1 so 1 2 H 218H 119，然后1 2 3等等，H 221F 222/code>

我试过想办法，但似乎搞错了。

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

javascript

arrays

loops

intervals

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-02-23 23:45:17

与现有的innerHTML连接，而不仅仅是分配给它，因为这将覆盖以前存在的任何内容。您还可以使用let而不是var来使代码更加整洁。另外，由于您只是插入文本，而不是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>

票数 3

Stack Overflow用户

发布于 2020-02-24 04:07:36

有几件事我会在这里改变。

使用多个setTimeout并将超时值设置为递增值可能会导致问题--如果您想要解决这些问题，超时在JS中是一个有限的资源。

如图所示，一种选择可能是使用setInterval作为用户，但我最喜欢的是使用异步/等待。

另外，如果您的列表变得很长，那么不断地更改innerHTML对DOM不是很好，相反，创建另一个DOM元素并添加这些元素将更有效率。他们的另一个优点是分开，这使得他们的风格也简单得多。

下面是一个使用async/await并添加到DOM中的示例，而不是不断地更新innerHTML，只是为了好玩，给它添加一些样式。

const delay=ms=>new Promise(r=>setTimeout(r,ms));

(async function() {
  const sumFormat = [1,2,3,4];
  for (const i of sumFormat) {
    const num = document.createElement('span');
    num.innerText = i;
    factOut.appendChild(num);
    await delay(500);
  }
}());

span {
  padding: 0.2rem 0.4rem;
  margin: 0.2rem 0.3em;
  background-color: lightblue;
  border: 1px solid black;
  border-radius: 0.5rem;
}

<div id="factOut"></div>

票数 2

Stack Overflow用户

发布于 2020-02-23 23:55:47

下面是使用setInterval()的示例

function SetValue(text, at){
     factOut.innerHTML += text[at] + (text.length-1 == at ?"":" "); 
} 

var sumFormat = [1,2,3,4,5];
var i = 0;
var myinterval = setInterval(function(){
     if(i == sumFormat.length){
      clearInterval(myinterval);
      return;
     }
     SetValue(sumFormat,i);
     i++;
},500)