如何使用for循环配合setTimeout实现每5秒发起一次AJAX请求

你的实现存在两个核心错误：

• 变量作用域异常：使用var声明的i属于全局作用域，所有setTimeout回调执行时读取的都是循环结束后的最终值6001，无法拿到循环过程中的递增值
• 定时逻辑错误：你设置的延迟为i * 5000，i的初始值为4000，第一次请求的延迟就达到20000000毫秒（约5.5小时），完全不符合每5秒发起一次请求的需求

如果要通过for循环配合setTimeout实现每5秒发一次AJAX请求，可以参考以下两种写法：

写法1：ES6+ 用let块级作用域解决变量绑定问题 #

// 调整req函数支持接收参数
function req(index) {
  $.ajax({
    // 你的AJAX业务逻辑
    url: "你的接口地址",
    success: res => {
      console.log(`第${index}次请求成功`, res)
    }
  })
}

// 以发起10次请求为例，可按需调整请求总次数
const totalReq = 10
for (let i = 0; i < totalReq; i++) {
  // 每次延迟 i*5000 毫秒，刚好实现间隔5秒发起一次
  setTimeout(() => {
    req(i + 1)
  }, i * 5000)
}

写法2：ES5 用闭包兼容旧环境 #

function req(index) {
  $.ajax({
    // 你的AJAX业务逻辑
  })
}

var totalReq = 10
for (var i = 0; i < totalReq; i++) {
  (function(j) {
    setTimeout(function() {
      req(j + 1)
    }, j * 5000)
  })(i)
}

如果需要严格保证上一次请求返回后再等5秒发起下一次请求，避免网络波动导致请求堆叠，更推荐使用递归式setTimeout或者setInterval配合请求锁实现，无需提前注册所有定时任务。

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