Javacript: постоянно меняйте характер - PullRequest
Новая
       7

Javacript: постоянно меняйте характер

3 голосов
/ 13 марта 2020

У меня есть тег <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, которая постоянно работает для изменения этого единственного символа?

Ответы [ 3 ]

5 голосов
/ 13 марта 2020

Это действительно не требует рекурсии. Просто используйте setInterval() во время цикла по массиву символов: 

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>
4 голосов
/ 13 марта 2020

Способ рекурсии может выглядеть следующим образом: 

const chars = ['|', '/', '-', '\']
const element = document.getElementById('rev')
function run (count) {
  element.innerHTML = chars[count % chars.length]
  return setTimeout(() => run(count + 1), 2000)
}
run(0)

Если ваш браузер поддерживает async/await: 

const chars = ['|', '/', '-', '\']
const element = document.getElementById('rev')

async function run (count) {
  element.innerHTML = chars[count % chars.length]
  await sleep(2000)
  run(step + 1)
}
run(0)

function sleep (duration) {
  return new Promise((resolve) => setTimeout(resolve, duration))
}
2 голосов
/ 13 марта 2020

Для этого можно использовать css анимацию. 

@keyframes spinner {
    0% {
        content: "|";
    }
    30% {
        content: "/";
    }
    50% {
        content: "-";
    }
    100% {
        content: "\\";
    }
}

.element::after {
    animation: spinner 0.5s linear infinite;
    display: block;
    font-size: 20px;
    content: "|";
}
<p class="element"></p>
...