Chrome控制台多个同延迟setTimeout仅首个生效，如何实现多次停顿？

嘿，这个问题我之前调试脚本的时候也遇到过，咱们先搞清楚为啥会出现这种情况，再给你两种实用的解决办法～

问题根源 #

你同时设置两个setTimeout(() => ..., 1000)，本质上是告诉浏览器：从现在开始算，1秒后同时执行这两个点击操作。所以它们会几乎在同一时间触发，自然看不到“依次停顿”的效果，看起来就像只有第一个有延迟一样。

解决方案 #

方法1：嵌套链式调用setTimeout #

把第二个定时器放在第一个的回调函数里，这样第一个点击执行完成后，才会开始计时第二个1秒的延迟，实现依次停顿：

// 先等1秒点击element1，再等1秒点击element2
setTimeout(() => {
  element1.click();
  // 第一个点击完成后，启动第二个延迟
  setTimeout(() => {
    element2.click();
  }, 1000);
}, 1000);

这种方式适合元素数量少的场景，逻辑直观，但如果有3个以上元素，嵌套层数会变多，可读性会下降。

方法2：用async/await + Promise封装延迟（更优雅） #

先封装一个通用的延迟函数，然后用async/await语法按顺序执行点击，代码更整洁，扩展性也更强：

// 封装一个返回Promise的延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 定义异步函数执行依次点击
async function clickElementsInSequence() {
  // 第一次停顿1秒后点击
  await delay(1000);
  element1.click();

  // 第二次停顿1秒后点击
  await delay(1000);
  element2.click();

  // 如果需要更多元素，直接往下加就行
  // await delay(1000);
  // element3.click();
}

// 调用函数执行
clickElementsInSequence();

如果是批量元素（比如存在数组里），还可以用循环简化：

const elementsToClick = [element1, element2, element3];

async function batchClickWithDelay() {
  for (const elem of elementsToClick) {
    await delay(1000);
    elem.click();
  }
}

batchClickWithDelay();

这种方式不管有多少个元素，代码结构都很清晰，后期维护也方便。

内容的提问来源于stack exchange，提问作者Артур Гудиев