javascript - 想要使用每 1 秒运行一次的无限循环使用普通 javascript 更改 html 网页中的文本，但是当我加载时网页卡住了

Question

我有一个 HTML 片段

和 javascript 文件来处理变化

const slideTitleArr =['financial Services', 'Management Services'];

function slidingTitle() {
    for (let i = 0; i>-1; i++) {
        if (i === slideTitleArr.length) {
            i=0;
        }
        setTimeout(function timer() {
            document.getElementById('sliding-title').innerHTML = slideTitleArr[i];
        }, i*1000);
    } 
}

window.onload =  slidingTitle()

<h1>Trailblazing CRM  for <span id="sliding-title"style="color: white">financial services</span> </h1>

我不知道为什么这行不通。

Answer 1

它崩溃是因为您创建了一个无限循环 (i>-1)，它阻止了 setTimeout 运行 (here is useful post on the JS event loop/call stack)。您正在寻找setInterval . setInterval() 将每 n 秒调用一个函数。

const slideTitleArr = ['financial Services', 'Management Services'];
let i = 0;
setInterval(() => {
  i = i >= slideTitleArr.length - 1 ? 0 : i + 1;
  document.getElementById('sliding-title').innerHTML = slideTitleArr[i];
}, 1000);

<h1>Trailblazing CRM for
  <span id="sliding-title">financial services</span>
</h1>