JavaScript遍历数组时跳过指定元素并设置固定间隔定时执行的问题

首先咱们来拆解下你遇到的两个问题的根源：

问题1：用1000 * index导致间隔过长的原因 #

你用的index是原数组的索引，不是过滤后符合条件元素的索引。比如原数组里第3、4个元素是address="old"，它们会被跳过，但index还是会递增到2、3，等到下一个符合条件的元素（原index=4）时，延迟时间就变成了4*1000=4秒，而不是在第二个符合条件元素之后等2秒——相当于你把那些被跳过元素的索引也算进延迟时间里了，自然会出现长时间等待的情况。

问题2：用固定延迟1000导致一次性输出的原因 #

JavaScript的循环执行速度非常快，在循环过程中会一次性创建所有的setTimeout定时器，而它们的延迟时间都是1秒，所以到时间后会几乎同时触发，就变成了一次性输出所有符合条件的内容。

解决方案：先过滤再定时遍历 #

最直观的方法是先把符合address="new"的元素筛选出来，得到一个只包含有效元素的新数组，然后遍历这个新数组，用它的索引来计算延迟时间，这样就能保证每两个有效输出之间间隔2秒：

const address = "new";
// 先过滤出符合条件的书签
const validBookmarks = bookmarks.filter(bookmark => bookmark.address === address);

// 遍历过滤后的数组，用过滤后的索引计算延迟
validBookmarks.forEach((bookmark, index) => {
  setTimeout(() => {
    console.log(bookmark.symbol);
  }, 2000 * index); // 这里改成2000毫秒，也就是2秒间隔
});

另一种方案：递归处理（适合不想提前过滤的场景） #

如果你不想提前过滤数组，也可以用递归的方式逐个查找符合条件的元素，处理完一个后延迟2秒再处理下一个：

const address = "new";
let currentIndex = 0;

function processNext() {
  if (currentIndex >= bookmarks.length) return;

  const bookmark = bookmarks[currentIndex];
  currentIndex++;

  if (bookmark.address === address) {
    console.log(bookmark.symbol);
    // 符合条件的话，延迟2秒再处理下一个
    setTimeout(processNext, 2000);
  } else {
    // 不符合条件，直接处理下一个
    processNext();
  }
}

// 启动递归
processNext();

这两种方案都能解决你的问题，第一种更简洁易读，第二种适合需要保留原数组遍历顺序且不想提前过滤的场景。

内容的提问来源于stack exchange，提问作者exper_1