JavaScript：不断改变字符

Question

我有一个<p>标签

<p id="rev">|</p>

我想通过 Javascript 不断更改以创建一个老式的加载动画，该动画将重复遵循此模式：

| / - \

我不熟悉 Javascript 如何处理递归，但以下代码块只是创建了一个很长的加载周期并且无法按预期运行：

function runRev() {
    document.getElementById('rev').innerHTML = "/";
    setTimeout(function(){}, 2000);
    document.getElementById('rev').innerHTML = "-";
    setTimeout(function(){}, 2000);
    document.getElementById('rev').innerHTML = "\\";
    setTimeout(function(){}, 2000);
    document.getElementById('rev').innerHTML = "|";
    setTimeout(function(){}, 2000);
    runRev();
}
runRev();

我想有更好的方法来实现这一点。如何创建一个持续运行以更改单个字符的 Javascript 函数？

Answer 1

这真的不需要递归。只需使用setInterval()while 循环字符数组即可：

const chars = ['|', '/', '-', '\\'];
const el = document.getElementById('loading');
let i = 0;

setInterval(() => {
  el.innerHTML = chars[i];
  i = (i + 1) % chars.length;
}, 100);

<span id="loading"></span>