如何按时间间隔显示数组索引中的值？附代码示例

嘿，我来帮你搞定这个问题！你现在的代码之所以会一下子把所有名字都显示出来，是因为循环里的定时器几乎同时触发了——循环执行得太快，每个setTimeout都设置了1000ms延迟，结果1秒后三个名字一起冒出来。要实现按间隔依次显示，我们需要给每个定时器设置递增的延迟时间，同时解决循环变量的作用域问题。

问题根源 #

你用var声明了循环变量f，它是函数作用域的变量，循环结束后f的值会变成3，所有定时器的回调里拿到的都是这个最终值。而且所有定时器的延迟都是1000ms，自然会同时执行。

修改后的代码方案 #

方案一：用let绑定循环变量 + 递增延迟

$(".span1").html("Warm Welcome To: " + "<br />");
const arr = [];
arr.push(["john", "jdoe", "very nice"]);
arr.push(["mike", "mdone", "job well"]);
arr.push(["haan", "hgore", "creative"]);
const interval = 1000; // 每个名字间隔1秒

// 用let声明f，每次循环都会创建独立的变量绑定当前索引
for (let f = 0; f < arr.length; f++) {
  // 延迟时间按索引递增：第一个1000ms，第二个2000ms，以此类推
  SendWishes(arr[f][0], interval * (f + 1));
}

function SendWishes(name, delay) {
  setTimeout(function () {
    // 用append替代重新赋值html，避免重复拼接已有内容，更高效
    $(".span1").append(name + "<br />");
  }, delay);
}

方案二：用forEach循环（更简洁）

如果觉得for循环麻烦，用数组的forEach方法更直观，它自带索引参数，不用手动处理循环变量：

$(".span1").html("Warm Welcome To: " + "<br />");
const arr = [
  ["john", "jdoe", "very nice"],
  ["mike", "mdone", "job well"],
  ["haan", "hgore", "creative"]
];
const interval = 1000;

arr.forEach((item, index) => {
  setTimeout(() => {
    $(".span1").append(item[0] + "<br />");
  }, interval * (index + 1));
});

关键修改点 #

1. 递增延迟时间：每个元素的延迟设置为interval * (索引+1)，确保第一个元素1秒后显示，第二个2秒后，以此类推。
2. 解决变量作用域：用let声明循环变量（或用forEach的索引参数），保证每个定时器回调能拿到当前迭代的正确索引。
3. 优化DOM操作：用append替代html()重新赋值，避免每次都覆盖并重新拼接已有内容，性能更好。

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