每'x'秒執行一次.map（）函數

Question

我有一個功能：

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

我如何每隔2秒執行pod.classList.add('playing') ？ 此外，我想保持同步，以確保所有pod迭代完成后//rest of code得以運行。

（對於那些想知道的人，序列只是HTML節點的數組）

編輯我嘗試過的：

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)

但是，在這個問題上，我都想避免兩個問題： addClass不會延遲； 所有迭代都“同時”執行。 此外， // rest of code正在異步運行（也就是我立即注意到console.log ）。

Answer 1

您可以使用Promise擴展將類添加到每個節點，還可以在處理完所有節點之后運行代碼。

 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

您不能簡單地暫停腳本的執行，使用setTimeout / setInterval是唯一的選擇。 但是，由於所有setTimeout調用都在同一時間執行，因此您必須嵌套它們或以越來越大的超時時間（2s，4s，6s等）來調用它們。 后者可以通過調用以下命令來實現：

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

為了在最后一個回調完成后執行腳本的其余部分，您必須將其包裝在另一個setTimeout回調中，延遲為sequence.length * 2000 （或(sequence.length + 1) * 2000 ，具體取決於您的需要）。