两个动作之间的同步for-of和延迟

基础概念

for-of 是 JavaScript 中的一个循环结构，用于遍历可迭代对象（如数组、字符串、Map、Set 等）。它提供了一种简洁的方式来迭代这些对象的元素。

const array = [1, 2, 3];
for (const item of array) {
  console.log(item);
}

延迟（Delay）通常指的是在程序执行过程中，故意暂停一段时间后再继续执行后续的操作。在 JavaScript 中，可以使用 setTimeout 函数来实现延迟。

setTimeout(() => {
  console.log('Delayed execution');
}, 1000); // 延迟1秒执行

相关优势

• for-of 循环：提供了一种简洁、易读的方式来遍历可迭代对象，避免了传统 for 循环中索引管理的复杂性。
• 延迟执行：允许程序在特定时间点执行操作，这对于实现动画、定时任务、用户交互响应等场景非常有用。

类型与应用场景

• for-of 循环：适用于需要遍历集合中每个元素的场景，如数据处理、数据展示等。
• 延迟执行：适用于需要定时触发的任务，如轮询、定时更新、动画效果等。

遇到的问题与解决方法

问题：在 for-of 循环中使用 setTimeout 导致延迟执行顺序不正确

原因：for-of 循环是同步执行的，而 setTimeout 是异步执行的。当 for-of 循环快速执行时，所有的 setTimeout 回调几乎会在同一个时间点被放入事件队列，导致延迟执行顺序与预期不符。

解决方法：使用闭包或 let 关键字来捕获每次循环的索引或值。

const array = [1, 2, 3];
for (let i = 0; i < array.length; i++) {
  setTimeout(() => {
    console.log(array[i]);
  }, 1000 * i); // 每次延迟时间递增
}

或者使用 async/await 和 Promise 来实现顺序延迟执行：

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const array = [1, 2, 3];
(async () => {
  for (const item of array) {
    await delay(1000);
    console.log(item);
  }
})();

参考链接

• MDN Web Docs: for...of loop
• MDN Web Docs: setTimeout

通过以上方法，可以有效地解决在 for-of 循环中使用延迟执行时遇到的问题。