javascript遍历元素的动态数组，获取值，然后使用值作为间隔来设置计时器倒计时

Question

我正在制作一个计时器，该计时器将使用动态输入的信息来显示每个条目的倒数计时器。计时器将遍历nodeList中的不同值。这些值将始终是数字值，这是一个示例：20, 7, 20, 7, 20, 7, 90, 20, 7, 20, 7, 20, 7, 90

这些值代表秒的块。所以20秒，然后7秒，然后20秒，然后7，依此类推...

我想遍历此列表，获取值，然后在其中分配值作为秒，并在每次循环新值时在列表中循环定义的时间。我将在此循环中添加更多的嵌套代码，以相应地对每个值所设置的计时器进行递减计数，但是我并不担心递减计数，只是获取了每秒钟的迭代以正确地递减atm。

因此，使用上面的示例列表，我立即触发第一个值（20），暂停20秒（以秒为单位的值），然后触发下一个值（7），暂停7秒，然后触发下一个值对其值的暂停以秒为单位，依此类推，直到整个列表过期。

NOTE：对于每个表单提交，此信息可能始终是不同的，因此代码本质上必须是动态的。

这是到目前为止我尝试过的最接近的位置。

首先，我已经使用Java脚本收集了值：]

const span = document.querySelectorAll('.selector');

span->表示输入条目，它们通过不同的条目在php中的各个foreach循环中运行，所有的.selector的类值都插入每个对应的输入标记中。遍历列表的迭代形式将始终被正确地索引，以循环遍历我所描述的值。

这给了我节点列表。

我使用.textContent在foreach循环中收集值，然后将时间间隔设置为变量，获取下一个同级的值，运行条件​​以设置时间间隔，然后检查循环触发的一致性。 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的新手，并且仍在学习它的工作原理。任何帮助将不胜感激！

同样，我要遍历节点列表，获取其值，将这些值用作秒的块，遍历列表，将每个值暂停为秒，然后移至下一个值，直到列表完成。

const span = document.querySelectorAll('.selector');

span.forEach(function(val){
    const data = val.textContent;
    let delay = setInterval(engine => {
        const { value, set } = engine.next();
        if (set) {
            clearInterval(delay);
        } else {
            const values = value.textContent;
            console.log('firing delay -> ' + data);
        }  
    }, data * 1000, span[Symbol.iterator]());
})

<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">90</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">90</span>

Answer 1

[如果我理解正确，并且如果我重新使用您的示例，则您希望在20秒后然后7秒后再20秒之后执行一些代码……依此类推。

我建议为每个跨度使用setTimeout。它们都在同一时间启动。第一个使用20秒的延迟，第二个使用27秒的延迟（从上一个setTimeout起20秒+ 7秒），第三个使用47秒的延迟（从上一个setTimeout起27秒+ 20秒）……您已经有了主意。

我使用reduce跟踪先前的延迟。

const spans = [...document.querySelectorAll('.selector')];

spans.reduce((totalDelay, span) => {
    const delay = parseInt(span.textContent);
    totalDelay += delay;
  
    setTimeout(() => {
        console.log(`firing delay -> ${delay}`);
    }, 1000 * totalDelay);
  
    return totalDelay;
}, 0);

<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">90</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">20</span>
<span class="selector">7</span>
<span class="selector">90</span>