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>