Не могу изменить текст javascript

Я попытался сделать анимацию на javascript.

Это должно выглядеть так:

Кадр 1:

ඞ______ _

Кадр 2:

_ඞ_____ _

Кадр 3:

__ඞ____ _

Кадр 4:

___ඞ___ _

Я хочу что-то, что меняет текст через несколько секунд. Итак, у меня есть ярлык, а это фрагмент кода.

document.getElementById('label').innerHTML='ඞ______ _';

sleep(500);

Но если я использую функцию сна, страница «ждет», пока моя «анимация» не закончится, и тогда я могу увидеть последний текст:

___ඞ___ _

Есть ли способ решить эту проблему?

Опубликуйте свой минимально воспроизводимый пример пожалуйста

— 31.03.2023 17:18

Почему вы не используете интервал?

— 31.03.2023 17:20

setTimeout или setInterval — это то, что вы хотите использовать. Методы сна обычно просто блокируют браузер....

— 31.03.2023 17:21

javascript text

31.03.2023 17:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны использовать async function для обновления анимации в то же время, когда делаете другие вещи, которые делает ваш javascript.

async function выглядит так

async renderAnimation () {
    setTimeout(() => {this.animate() }, 500);  
}

animate(){
    document.getElementById('label').innerHTML='ඞ______ _';
}

Вы должны проверить эту ссылку для более подробного объяснения асинхронности: https://www.w3schools.com/js/js_async.asp

асинхронность здесь не имеет значения. Ничего не ждет... Если бы у вас был линтер, он бы выдавал ошибки.

— 10.04.2023 14:29

31.03.2023 17:25

Вам нужно закодировать свою вещь, чтобы использовать интервал или тайм-аут.

function annimateText(elem, frames, ms) {

  let index = 0;
  let timer;
  
  const stop = () => window.clearTimeout(timer);
  
  const update = () => {
    elem.textContent = frames[index];
    index++;
    if (frames.length <= index) stop();
  };

  timer = window.setInterval(update, ms);
  
  update();

  return {
    stop: timer,
  };
}


const frames = [
  "ඞ______ _",
  "_ඞ_____ _",
  "__ඞ____ _",
  "___ඞ___ _",
  "____ඞ__ _",
  "_____ඞ_ _",
  "______ඞ _",
  "_______ඞ_",
]
annimateText(document.querySelector("#out"), frames, 100);

#out {
  font-family: monospace;
}

<span id = "out"></span>

Теперь ты можешь спать? Да, вы можете сделать это с помощью async и await.

async function outputAndWait (text) {
  document.querySelector("#out").textContent = text;
  await sleep(100);
}

async function sleep (ms) {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms);
  });
}

async function animateIt () {
  await outputAndWait("ඞ______ _");
  await outputAndWait("_ඞ_____ _");
  await outputAndWait("__ඞ____ _");
  await outputAndWait("___ඞ___ _");
  await outputAndWait("____ඞ__ _");
  await outputAndWait("_____ඞ_ _");
  await outputAndWait("______ඞ _");
  await outputAndWait("_______ඞ_");
}

animateIt();