每'x'秒执行一次.map（）函数

Question

I have a function:

function getPattern (sequence) {
  sequence.map(pod => pod.classList.add('playing'))
  // rest of code
}

How would I execute pod.classList.add('playing') every, let's say, 2 seconds? Moreover, I want to keep this synchronous to ensure that //rest of code is run after all the pod iterations have finished.

(For those wondering, sequence is just an array of HTML nodes)

EDIT What I have tried:

sequence.forEach(pod => setTimeout(() => { pod.classList.add('playing') }, 2000))
sequence.map(pod => setTimeout(() => { pod.classList.add('playing') }, 2000))

setTimeout(() => {
 sequence.map(pod => pod.classList.add('playing'))
}, 2000)
setInterval(() => {
 sequence.map(pod => pod.classList.add('playing'))
}, 2000)

However I am suffering both problems I wanted to avoid in the question: addClass isn't delayed; all iterations execute 'at the same time'. Moreover, the // rest of code is being run asynchronously (aka I am noticing console.log 's immediately).

Answer 1

You can use Promise s to spread out adding the class to each node and also to run code after all nodes have been processed.

 var myArrayOfDomNodes = Array.from(document.querySelectorAll('p')); addClassesSequentially(myArrayOfDomNodes).then(_ => { // this code will run after all classes have been added. console.log('all done'); }); function addClassAfterTwoSeconds(el) { return new Promise(res => { setTimeout(_ => { el.classList.add('playing'); res(); }, 2000); }); } function addClassesSequentially(sequence) { let item = sequence.shift(); return item ? addClassAfterTwoSeconds(item).then(addClassesSequentially.bind(null, sequence)) : Promise.resolve(); } 

 p.playing { color : red; } 

 <p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> 

Answer 2

You can't simply pause your script's execution, using setTimeout / setInterval is your only option. However since all setTimeout calls get executed the same time, you either have to nest them or call them with increasing timeouts (2s, 4s, 6s, ...). The latter can be achieved by calling the following:

`sequence.forEach((pod, i) => setTimeout(() => { pod.classList.add('playing') }, (i + 1) * 2000))`

For execution the rest of the script after the last callback has finished, you have to wrap it in another setTimeout callback with a delay of sequence.length * 2000 (or (sequence.length + 1) * 2000 , depending on your needs).