html - 循环遍历元素数组以每 X 秒显示在浏览器上

Question

我正在尝试制作一个文本元素数组，每隔 X 秒显示一次。例如，将显示“你好”，然后在 X 秒后文本将更改并显示“我 2 岁。

我正在抓取一个 DOM 元素并使用 .innerHTML 来更改带有在 javascript 中创建的对话框数组元素的文本。我对代码进行了故障排除，似乎 setTimeout 不起作用，因为它不是每隔 X 秒等待一次来显示每个数组元素(我有 5 秒)。我相信这就是为什么我只显示最后一个元素而不是看到每个元素显示 X 秒的原因。有人可以帮我吗？我对编码也很陌生。

谢谢。

此外，如果您能帮助我创建每次更改文本时文本元素淡入淡出的效果，那就太好了。

var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];

function changeText() {

  var timer = 0;

  for (var i = 0; i < dialog.length; i++) {

    setTimeout(document.getElementById('h1').innerHTML = dialog[i], timer);

    timer = timer + 5000;


  }

}

changeText();

<div id="h1">Hello</div>

Answer 1

首先，您没有正确使用 setTimeout() 函数。更正后的版本是。

• var 在 for 循环中应转换为 let。 Read why?

var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];

function changeText() {

  var timer = 0;

  // Use let instead of var
  for (let i = 0; i < dialog.length; i++) {

    setTimeout(() => { 
      document.getElementById('h1').innerHTML = dialog[i]; 
    }, timer);

    timer = timer + 5000;
  }

}

changeText();

<div id="h1">Hello</div>

最好使用 setInterval() 而不是 setTimeout。同时初始化 let elem = document.getElementById('h1'); 不是每次定时器都被调用。

var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];

let displayIndex = 0;
let elem = document.getElementById('h1');
let delay = 1000; // 1 second delay

setInterval(() => {
  if (elem) {
    elem.innerHTML = dialog[displayIndex];
  }
  
  // Move to the next item in dialog
  displayIndex++;
  
  // If display index goes out of index range, start again
  if (displayIndex >= dialog.length) {
    displayIndex = 0;
  }
}, delay);

<div id="h1"></div>

淡化效果版

要获得淡出效果，您需要相应地更改 html 结构和 javascript。

let displayIndex = 0;
let elems = $('#h1 > span');
let delay = 1000;

setInterval(() => {
  
  elems.removeClass();
  elems.addClass('hidden');
  
  // Move to the next item in dialog
  displayIndex++;
  
  // If display index goes out of index range, start again
  if (displayIndex >= elems.length) {
    displayIndex = 0;
  }
  
  $(elems[displayIndex]).addClass('visible');
}, delay);

#h1 {
  position: relative;
}

#h1 span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transition-delay: 0s;
}

span.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

span.hidden {
  opacity: 0;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="h1">
  <span class="visible">Hello,</span>
  <span class="hidden">My name is James</span>
  <span class="hidden">I am 2 years old.</span>
  <span class="hidden">I have a dog</span>
</div>