Question

问题在于，现在循环仅显示数组的最后一个值为'o'

const h2 = document.querySelector('h2');
const title = document.querySelector('h1');

const word = ['h', 'e', 'l', 'l', 'o'];

function loop() {
    for(let i = 0; i < word.length; i++) {
        window.setInterval(() => {
            console.log(word[i]);
            title.textContent = word[i];
        }, 1000)
    }
}

loop();

<h1 />
<h2 />

Answer 1

这是因为您正在循环内进行间隔，这意味着到1时，i已经在数组i = 4的末尾。

我想这就是你想要的吗？

let i = 0;
let interval;

const loop = () => {
  console.log(word[i]);
  if (word[i]) title.textContent += word[i];
  else clearInterval(interval)
  i ++;
}

interval = window.setInterval(loop, 1000);

希望这会有所帮助

Answer 2

如果要在1秒后更改数组中所有单词的标题，则可以从索引0开始并保持setInterval直到索引小于word.length。

赞：

const h2 = document.querySelector('h2');
const title = document.querySelector('h1');

const word = ['h', 'e', 'l', 'l', 'o'];

loop(0);

function loop(index) {
  setTimeout(() => {
    if (index < word.length) {
      title.textContent = word[index];
      setTimeout(() => loop(index+ 1), 1000);
    } else {
    setTimeout(() => loop(0), 1000);
    }
  }, 1000)
}

在这里，我设置第一个元素，并为下一个设置setTimeout

如果索引超过了字长，我还要另外输入以重置字循环。

Answer 3

这是我的理解。该程序应每隔一秒钟附加一次 hello 。

此代码对我有用

html

<h1 />
<h2 />

js

const h2 = document.querySelector('h2');
const title = document.querySelector('h1');

const word = ['h', 'e', 'l', 'l', 'o'];

function loop() {
   for(let i = 0; i < word.length; i++) {
       window.setInterval(() => {
            console.log(word[i]);
            title.textContent += word[i] ;
       }, 1000)
    }
}

loop();

演示：

https://jsfiddle.net/Danielprabhakaran_N/sjzrx3qy/

Answer 4

对于一小段间隔，我建议使用setTimeout代替，并给它们适当的超时时间，并在想要的字符上加上一个闭合符，以添加到元素的innerHTML中。

function loop(word, target) {
    for (let i = 0; i < word.length; i++) {
        setTimeout((c => () => target.innerHTML += c)(word[i]), (i + 1)* 1000);
    }
}

loop('hello', document.querySelector('h1'));

<h1></h1>

如果您仍然想使用setInterval，则需要存储间隔并在单词末尾清除此间隔。

function loop(word, target) {
    var interval = setInterval((i => () => {
        if (i >= word.length) return clearInterval(interval);
        target.innerHTML += word[i++];
    })(0), 1000);
}

loop('hello', document.querySelector('h1'));

<h1></h1>

使用setInterval遍历数组不起作用

4 个答案: