JS循环中使用setTimeout切换图片Src报错：Cannot read property '3' of undefined

这个错误的核心是异步回调的闭包陷阱，再加上定时器的时间逻辑有误，导致当setTimeout的回调执行时，循环早已跑完，你访问的i和j早就超出了数组的有效索引范围。具体拆解问题：

问题点说明 #

• 闭包未捕获j的值：你只在立即执行函数里传递了i，但j还是引用着外层循环的变量。当所有定时器回调触发时，外层的j已经循环到了imgs[i].length（超出有效索引），甚至i也变成了imgs.length——这时候imgs[i]就是undefined，再去访问imgs[i][j]自然会抛出Cannot read property '3' of undefined的错误。
• 定时器时间重复：你现在用i * 5000作为延迟，同一i下的所有j对应的定时器会在同一时间触发，根本做不到每隔5秒依次切换图片。

修正后的代码方案 #

我们可以通过两种方式解决闭包问题，同时调整延迟时间的计算逻辑：

方案1：用立即执行函数捕获i和j，搭配全局延迟计数器 #

let path = "你的图片路径前缀"; // 假设你已定义path变量
let imgs = [/* 你的二维数组内容 */];
let count = 0; // 全局计数器，确保每张图片延迟递增5秒

for (let i = 0; i < imgs.length; i++) {
  for (let j = 0; j < imgs[i].length; j++) {
    // 立即执行函数捕获当前迭代的i、j和延迟计数
    (function(currentI, currentJ, delayCount) {
      setTimeout(function() {
        $("#map_image").attr("src", path + imgs[currentI][currentJ]);
      }, delayCount * 5000);
    })(i, j, count);
    count++; // 每遍历一个元素，计数器加1，保证延迟依次叠加
  }
}

方案2：利用let的块级作用域（ES6+）简化代码 #

因为let在循环中会为每一次迭代创建新的变量绑定，所以不需要额外的立即执行函数，代码更简洁：

let path = "你的图片路径前缀";
let imgs = [/* 你的二维数组内容 */];
let count = 0;

for (let i = 0; i < imgs.length; i++) {
  for (let j = 0; j < imgs[i].length; j++) {
    setTimeout(function() {
      $("#map_image").attr("src", path + imgs[i][j]);
    }, count * 5000);
    count++;
  }
}

关键改动说明 #

1. 捕获循环变量：无论是用立即执行函数传参，还是用let声明循环变量，都是为了让每个定时器的回调能拿到当前迭代的i和j值，而不是循环结束后的最终值。
2. 全局计数器count：用来确保每个图片的延迟时间依次递增5秒（count*5000），实现每隔5秒切换一张的效果，避免同一时间切换多张图片。

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