Таймер обратного отсчёта после функции

Question

У меня есть функция генерации рандомного числа, и анимация для него(от 0 до генерируемого числа) как мне сделать так, что бы перед генерацией нового числа на его месте появлялся таймер обратного отсчёта(для примера от 30 секунд до 0, далее код генерации числа, после чего снова от 30 до 0 и так далее) Я пытался реализовать это через setTimeout, но толкового ничего не вышло, надеюсь на вашу помощь Вот сам код:

const oneStepTime = 100;
const disp = document.getElementById("out");

function randomFloat(maxNumber, maxStep, minStep) {
  let acc = 0;
  const interval = setInterval(() => {
    let step = 0.01;
    if (maxNumber - acc > step) {
      acc += step;
    } else {
      acc = maxNumber
      clearInterval(interval);
    }
    disp.innerText = acc.toFixed(2);
  }, oneStepTime);
}
function run(min, max) {
  const waitTime = (Math.random() * (max - min) + min) * 10000;
  console.log('Надо подождать', waitTime);
  setTimeout(() => {
    randomFloat(Random(), 10, 1);
    run(min, max);
  }, waitTime);
}

function Random() {
  const max = 5;
  return Math.round(Math.random() * max * 100) / 100;
}

randomFloat(Random(), 10, 1);
run(3, 10);

Answer 1

Попробуйте вот так что ли:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Number Generator</title>
</head>
<body>
  <div id="out">0.00</div>
  <div id="timer"></div>

  <script>
    const oneStepTime = 100;
    const disp = document.getElementById("out");
    const timerDisp = document.getElementById("timer");

    function randomFloat(maxNumber, maxStep, minStep) {
      let acc = 0;
      const interval = setInterval(() => {
        let step = 0.01;
        if (maxNumber - acc > step) {
          acc += step;
        } else {
          acc = maxNumber;
          clearInterval(interval);
        }
        disp.innerText = acc.toFixed(2);
      }, oneStepTime);
    }

    function run(min, max) {
      const waitTime = (Math.random() * (max - min) + min) * 10000;
      console.log('Надо подождать', waitTime);

      // Display countdown timer
      let count = 30;
      const countdownInterval = setInterval(() => {
        timerDisp.innerText = count;
        count--;
        if (count < 0) {
          clearInterval(countdownInterval);
          timerDisp.innerText = '';
          randomFloat(Random(), 10, 1);
          run(min, max);
        }
      }, 1000);
    }

    function Random() {
      const max = 5;
      return Math.round(Math.random() * max * 100) / 100;
    }

    randomFloat(Random(), 10, 1);
    run(3, 10);
  </script>
</body>
</html>

БЛОГ НА HUSL

Таймер обратного отсчёта после функции

Ответы (1 шт):