Как запускать заново SetInterval() при нажатии на кнопку)?

Question

Как так сделать, когда прогресс бар завершился, снова запускался при нажатии на кнопку? Уже 3 часа бьюсь, но не как не могу реализовать. Помогите!

CodePen: https://codepen.io/Power2021/pen/PojxQQY

const btns = document.querySelectorAll(".btn");
const progressBar = document.querySelector(".progress__bar");

let progress = 0;
let timeBar;

function btn() {
  btns.forEach((item) => {
    item.addEventListener("click", (e) => {
      btns.forEach((item) => {
        item.classList.remove("active");
      });
      e.target.classList.add("active");
      progressBarTime();
    });
  });
}

function progressBarTime() {
  timeBar = setInterval(frame, 100);
  function frame() {
    if (progress < 100) {
      progressBar.style.width = progress + "%";
      progressBar.textContent = progress + "%";
      progress++;
    } else {
      progressBar.style.width = 0 + "%";
      progressBar.textContent = 0 + "%";
    }
  }
}

btn();

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.btn {
  cursor: pointer;
}

.btn.active {
  color: #fff;
  background-color: #000;
}

.progress {
  width: 100%;
  margin-top: 30px;
  background-color: #e5e5e5;
  border-radius: 10px;
}

.progress__bar {
  width: 0;
  color: #fff;
  background-color: green;
  border-radius: 10px;
  padding: 3px 10px;
}

<div class="container">
  <div class="buttons">
    <button class="btn active">Кнопка 1</button>
    <button class="btn">Кнопка 2</button>
    <button class="btn">Кнопка 3</button>
    <button class="btn">Кнопка 4</button>
  </div>
  <div class="progress">
    <div class="progress__bar">0</div>
  </div>
</div>

Answer 1

У Вас старт условия заключается в проверке глобальной переменной progress. А она не сбрасывается до 0 после первого прохождения цикла. Ее нужно прировнять к 0, а также очистить текущий интервал.

P.S. Советую почитать про вред использования глобальных переменных.

const btns = document.querySelectorAll(".btn");
const progressBar = document.querySelector(".progress__bar");

let progress = 0;
let timeBar;

function btn() {
  btns.forEach((item) => {
    item.addEventListener("click", (e) => {
      progress = 0; // сброс интервала при клике
      clearInterval(timeBar); //очистка интервала при клике.
      btns.forEach((item) => {
        item.classList.remove("active");
      });
      e.target.classList.add("active");
      progressBarTime();
    });
  });
}

function progressBarTime() {
  timeBar = setInterval(frame, 100);

  function frame() {
    if (progress < 100) {
      progressBar.style.width = progress + "%";
      progressBar.textContent = progress + "%";
      progress++;
    } else {
      progressBar.style.width = 0 + "%";
      progressBar.textContent = 0 + "%";
    }
  }
}

btn();

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.btn {
  cursor: pointer;
}

.btn.active {
  color: #fff;
  background-color: #000;
}

.progress {
  width: 100%;
  margin-top: 30px;
  background-color: #e5e5e5;
  border-radius: 10px;
}

.progress__bar {
  width: 0;
  color: #fff;
  background-color: green;
  border-radius: 10px;
  padding: 3px 10px;
}

<div class="container">
  <div class="buttons">
    <button class="btn active">Кнопка 1</button>
    <button class="btn">Кнопка 2</button>
    <button class="btn">Кнопка 3</button>
    <button class="btn">Кнопка 4</button>
  </div>
  <div class="progress">
    <div class="progress__bar">0</div>
  </div>
</div>

БЛОГ НА HUSL

Как запускать заново SetInterval() при нажатии на кнопку)?

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