JS中如何给循环函数设置超时实现间隔2秒切换指定文本

• JavaScript 运行在单线程的事件循环机制下，没有原生的同步阻塞wait()/sleep()方法，你编写的while(true)死循环加同步等待逻辑会直接阻塞JS主线程，导致DOM更新、页面渲染都无法执行，自然看不到元素内容变化。
• 如果你尝试使用await wait()写法不生效，是因为await只能等待Promise对象，你没有正确封装返回Promise的wait()方法，直接调用会抛出错误。

方案1：async/await 写法（适配你原有代码逻辑） #

先封装返回Promise的延迟函数，再将循环函数改为异步函数即可：

// 封装延迟方法
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function looptext() {
  while(true) {
    document.getElementById("hititle").value = '1';
    await wait(2000)
    document.getElementById("hititle").value = '2';
    await wait(2000)
    document.getElementById("hititle").value = '3';
    await wait(2000)
    document.getElementById("hititle").value = '4';
    await wait(2000)
    document.getElementById("hititle").value = '5';
    await wait(2000)
  }
}
// 调用启动循环
looptext()

注意：如果id为hititle的是普通文本元素（如div、p、span），将代码中的.value替换为.textContent即可。

方案2：setInterval 定时切换写法 #

通过维护内容索引的方式实现，逻辑更简洁：

const contentArr = ['1', '2', '3', '4', '5']
let currentIndex = 0
const titleEl = document.getElementById('hititle')

setInterval(() => {
  titleEl.value = contentArr[currentIndex]
  currentIndex = (currentIndex + 1) % contentArr.length
}, 2000)

内容的提问来源于stack exchange，提问作者ducc