Я делаю таймер, который будет использовать динамически введенную информацию для отображения таймера обратного отсчета для каждой записи. Таймер будет перебирать различные значения в нодлисте. Эти значения всегда будут числовыми c значениями. Вот пример: 20, 7, 20, 7, 20, 7, 90, 20, 7, 20, 7, 20, 7, 90
Эти значения представляют блоки секунд. Итак, 20 секунд, затем 7 секунд, затем 20 секунд, затем 7 и т. Д. c ...
Я хочу перебрать этот список, получить значения, а затем присвоить им значения в секундах и l * 1057. * через список, задерживающийся на определенное время каждый раз, когда новое значение зацикливается. Я добавлю еще один вложенный код в этом l oop, который отсчитывает таймер, установленный для каждого значения соответственно, но я пока не беспокоюсь о обратном отсчете, просто получая итерацию каждого блока секунд для правильного отсчета atm.
Таким образом, используя приведенный выше пример списка, я немедленно запускаю первое значение (20), приостанавливаю 20 секунд (его значение в секундах), затем запускаю следующее значение (7), приостанавливаю 7 секунд, затем запускаю следующее значение пауза для его значения в секундах, так до тех пор, пока не истечет весь список.
ПРИМЕЧАНИЕ: Эта информация всегда может отличаться для каждой отправки формы, поэтому код должен быть Динамо c в природе.
Вот самое близкое, что я когда-либо пытался сделать.
Сначала я собрал значения, используя Javascript:
const span = document.querySelectorAll('.selector');
span -> представляет входные записи, проходящие через различные циклы foreach в php, поступающие из разных записей, все со значением класса .selector, вставленным в каждый соответствующий входной тег. Формирование итерации по списку всегда будет правильно проиндексировано во времени для циклического перебора значений, как я описал.
Это дает мне список узлов.
Я собираю значения в foreach l oop, используя .textContent, затем я устанавливаю интервал в качестве переменной, получаю значение следующего брата, запускаю условные выражения, чтобы установить интервал, затем проверяю стрельбу l oop на согласованность. See my snippit below
span.forEach(function(value){
const data = value.textContent;
// Now that I have the nodelist values I run them through `setInterval`
let delay = setInterval(engine => {
const { value, set } = engine.next()
if (set) {
clearInterval(delay)
} else {
const values = value.textContent;
console.log('firing delay -> ' + values);
}
}, data * 1000, span[Symbol.iterator]())
})
Задержка срабатывает, но она непоследовательна и не успевает с необходимыми отсчетами секунд. Я не против использования другого метода для достижения этой цели, поскольку я новичок в JS и все еще учусь тому, как он работает на самом деле. Будем очень благодарны любой помощи!
Опять же, я хочу перебрать нодлист, получить его значения, использовать эти значения в виде блоков секунд, l oop, перебирая список для каждого значения в виде секунд, затем переходя к следующему значению до Список завершен.
ОБНОВЛЕНИЕ 4 мая 2020 года: Используя обновленный Cedrics, уменьшите код Я могу получить динамический таймаут c, работающий для отображения каждой итерации в списке узлов, используя его установленное значение в секундах, а затем отсчитайте эти секунды по отдельности.
const spans = [...document.querySelectorAll('.selector')];
const timerEl = document.getElementById('timer');
const count = spans.length;
function countDown(secs,elem){
const timerEl = document.getElementById(elem);
timerEl.innerHTML = `${secs}`;
if(secs === 1){
clearTimeout(timer);
return timer;
}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
let i = 0;
spans.reduce((totalDelay, span) => {
setTimeout(() => {
const circuits = document.querySelectorAll('.selector');
const circuit = circuits[i].innerText;
let alt = circuits[i].attributes[0].textContent;
let time = delay;
console.log(alt)
console.log(`${circuit} -> ${delay}`);
console.log(`${i + 1} of ${count}`);
//need logic to figure out if node is last item in list then display finished
countDown(delay,"timer");
i++;
}, 1000 * totalDelay);
const delay = parseInt(span.textContent);
totalDelay += delay;
return totalDelay;
}, 0);
<span alt="Workout" class="selector">5</span>
<span alt="Break" class="selector">3</span>
<span alt="Workout" class="selector">5</span>
<span alt="Break" class="selector">3</span>
<span alt="Workout" class="selector">5</span>
<span alt="Break" class="selector">3</span>
<span alt="Cool Down" class="selector">10</span>
<span alt="Workout" class="selector">5</span>
<span alt="Break" class="selector">3</span>
<span alt="Workout" class="selector">5</span>
<span alt="Break" class="selector">3</span>
<span alt="Workout" class="selector">5</span>
<span alt="Break" class="selector">3</span>
<span alt="Cool Down" class="selector">10</span>
<div id="timer"></div>