Question

我有一个功能：

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

我将如何执行pod.classList.add('playing')每次，比方说，2秒？此外，我希望保持同步，以确保在所有//rest of code次迭代完成后运行pod。

（对于那些想知道，序列只是一个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正在异步运行（a.k.a我立即注意到console.log）。

Answer 1

您可以使用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(); }分散向每个节点添加类，并在处理完所有节点后运行代码。

＆＃13;

p.playing {
  color : red;
}

＆＃13;

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

＆＃13;

class MainSplitViewController: UISplitViewController, UISplitViewControllerDelegate {

override func viewDidLoad() {
    super.viewDidLoad()
    self.delegate = self
}

func splitViewController(_ splitViewController: UISplitViewController, collapseSecondary secondaryViewController: UIViewController, onto primaryViewController: UIViewController) -> Bool {
    return true
} }

＆＃13;

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，具体取决于您的需要）。

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

2 个答案: