Блог

Главная - Вопросы по программированию - Как создать несколько индикаторов выполнения, вызываемых последовательно (один за другим), используя только Vanilla JS для простого HTML CSS? Без setTimeout

Как создать несколько индикаторов выполнения, вызываемых последовательно (один за другим), используя только Vanilla JS для простого HTML CSS? Без setTimeout

#javascript #html #css

#javascript #HTML #css

Вопрос:

При загрузке документа мне нужно, чтобы три индикатора выполнения выполнялись последовательно один за другим, используя ванильный JS, HTML и CSS. Поэтому, когда первый завершает загрузку до завершения (это максимальное значение), следующий запускается. Я не ищу сложное CSS-решение. Мне любопытно узнать, как это сделать только с помощью vanilla JS без подхода setTimeout.

Я создал это на jsfiddle https://jsfiddle.net/blitzr/vf78hu0g/3 /

  <div>
      <label>Bar 1</label>
      <progress class="progressBars" value="0" max = "90"></progress>
      
      <br>
      
      <label>Bar 2</label>
      <progress class="progressBars" value="0" max = "35"></progress>
      
      <br>
      
      <label>Bar 3</label>
      <progress class="progressBars" value="0" max = "35"></progress>
      
      <br>

</div>

Я показываю, как я бы подошел к одному индикатору выполнения.

 var index = 0;
var id;

let bars = document.getElementsByClassName(`progressBars`);

this.id = setInterval(() => {
  increaseProgress(bars[this.index])    
}, 10 );


function increaseProgress(bar) {
  if (bar.value < bar.max) bar.value  ;
  else {
    clearInterval(this.id);
  }
}

Со следующим css

 progress {
  width: 500px;
}
progress::-webkit-progress-bar{
  background-color: gray;
}
progress::-webkit-progress-value{
  background-color: green;
}

Ответ №1:

Вы можете написать функцию, которая запускает интервальный таймер для определенного бара в вашей bars HTMLCollection. Функция может принимать индекс, представляющий, с какого бара начинать выполнение, и затем будет использоваться setInterval() для обновления значения этого конкретного индикатора выполнения. Когда строка заполнится, вы можете очистить свой интервал, а затем снова вызвать свою функцию с индексом следующего столбца в вашей коллекции, который будет равен at index 1 . Перед запуском вашей функции вы также можете проверить, что bar это определено как в конечном итоге будет передан индекс, которого нет в вашей HTMLCollection bars :

 const bars = document.getElementsByClassName('progressBars');

function startProgress(bars, index = 0) {
  const bar = bars[index];
  if (!bar) return;

  const id = setInterval(() => {
    if (bar.value < bar.max) bar.value  ;
    else {
      clearInterval(id);
      startProgress(bars, index   1);
    }
  }, 10);
}

startProgress(bars); 
 <label>Bar 1</label>
<progress class="progressBars" value="0" max="90"></progress>
<br />

<label>Bar 2</label>
<progress class="progressBars" value="0" max="35"></progress>
<br />

<label>Bar 3</label>
<progress class="progressBars" value="0" max="35"></progress>

Метки: , ,