JavaScript“document.getElementById().innerHTML”在循环中等待

Posted 2023-02-19

【中文标题】JavaScript“document.getElementById().innerHTML”在循环中等待

【英文标题】：JavaScript "document.getElementById().innerHTML" waits in loop

【发布时间】：2020-10-04 09:40:48

【问题描述】：

我有一个 JS 程序，它循环遍历单词列表并设置文本

<span id="changing"></span>

到列表中的当前项目。这是我的代码：

const words = [
  "Amazing",
  "Simple",
  "Powerful",
  "Extensible",
  "Fast",
  "Lightweight",
  "Integrated",
  "Incredible",
];

let num = 0;

function infinite() 
  while (num < 1) 
    words.forEach((item) => 
      document.getElementById("changing").innerhtml = item;
    );
  

如何每次更改单词时等待 1 秒？ （另外，这似乎没有任何作用，所以如果你能提供帮助，那就太棒了）

【问题讨论】：

使用 setInterval

infinite 将阻止您的浏览器

使用 setTimeout 可以解决这两个问题。

【参考方案1】：

您可以通过一点递归和使用setTimeout 函数来做到这一点。

const words = ["Amazing", "Simple", "Powerful", "Extensible", "Fast", "Lightweight", "Integrated", "Incredible"];
function infinite(index) 
   if (index === words.length) 
       index = 0;
   

   document.getElementById("changing").innerHTML = words[index];
   setTimeout(() => infinite(index + 1), 1000);


infinite(0);

或者你可以使用setInterval 来实现同样的目标

const words = ["Amazing", "Simple", "Powerful", "Extensible", "Fast", "Lightweight", "Integrated", "Incredible"];

let index = 0;

function infinite() 
   if (index >= words.length) 
       index = 0;
   

   document.getElementById("changing").innerHTML = words[index];
   index++;


setInterval(infinite, 1000);

但是，通过该特定实现，index 变量将可以从该范围内的任何其他内容中更改。 setTimeout 方法封装了索引值，使其不能被外部更改。

【参考方案2】：

有一个名为setInterval() 的内置javascript 函数，它以n 的间隔无限执行一个函数，以毫秒为单位。将此应用于您的情况：

const words = ["Amazing", "Simple", "Powerful", "Extensible", "Fast", "Lightweight", "Integrated", "Incredible"];

var index = 0;
setInterval(() => 
  document.getElementById("changing").textContent = words[index];
  index = (index+1) % words.length;// If index becomes the last element, it will then go to the first element, making a loop
, 1000); // 1000 ms = 1 s

<span id="changing"></span>

【讨论】：

这非常有效。但是您知道是否有任何方法可以使用 CSS transition all ease-in-out 让这看起来更好？

这绝对是可能的，但我不确定你应该使用过渡，而是animation。你在文本之间寻找什么样的动画？

只是一个简单的淡入淡出效果。