for循环 + setTimeout 结合一些示例(前端面试题）_网络技术

for循环 + setTimeout 结合一些示例(前端面试题）

发布时间 - 2026-01-11 03:02:08 点击率：次

一、背景

最近在翻看以前的老书《node.js开发指南》，恰好碰到 for 循环 + setTimeout 的经典例子，于是重新梳理了思路并记录下。

二、写在前面，setTimeout 和 setInterval 的执行机制

在日常编码中，你会发现，给 setTimeout 和 setInterval 设定延迟时间往往并不准，或者干脆 setTimeout(function(){xxx},0) 也不是立马执行（特别是有耗时代码在前），这是因为 js 是单线程的，有一个事件队列机制，setTimeout 和 setInterval 的回调会到了延迟时间塞入事件队列中，排队执行。

setTimeout ：延时 delay 毫秒之后，啥也不管，直接将回调函数加入事件队列。

setInterval ：延时 delay 毫秒之后，先看看事件队列中是否存在还没有执行的回调函数（ setInterval 的回调函数），如果存在，就不要再往事件队列里加入回调函数了。

看下面示例：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

结果：1 秒之后，同时输出 5 个 5。

因为 for 循环会先执行完（同步优先于异步优先于回调），这时五个 setTimeout 的回调全部塞入了事件队列中，然后 1 秒后一起执行了。

三、正文

接下来就是那道经典的代码：

for (var i = 0; i < 5; i++) { 
  setTimeout(function (){
    console.log(i); 
   },1000); 
}

结果：5 5 5 5 5

为什么不是 1 2 3 4 5，问题出在作用域上。

因为 setTimeout 的 console.log(i); 的i是 var 定义的，所以是函数级的作用域，不属于 for 循环体，属于 global。等到 for 循环结束，i 已经等于 5 了，这个时候再执行 setTimeout 的五个回调函数（参考上面对事件机制的阐述），里面的 console.log(i); 的 i 去向上找作用域，只能找到 global下的 i，即 5。所以输出都是 5。

解决办法：人为给 console.log(i); 创造作用域，保存i的值。

解决办法一

for (var i = 0; i < 5; i++) { 
  (function(i){   //立刻执行函数
    setTimeout(function (){
      console.log(i); 
     },1000); 
  })(i); 
}

这里用到立刻执行函数。这样 console.log(i); 中的i就保存在每一次循环生成的立刻执行函数中的作用域里了。

解决办法二

for (let i = 0; i < 5; i++) {   //let 代替 var
  setTimeout(function (){
    console.log(i); 
   },1000); 
}

let 为代码块的作用域，所以每一次 for 循环，console.log(i); 都引用到 for 代码块作用域下的i，因为这样被引用，所以 for 循环结束后，这些作用域在 setTimeout 未执行前都不会被释放。

四、补充

在写示例代码的过程中，发现一个语法点：

 function a(i){ 
  console.log(i);  
 }
for (var i = 0; i < 5; i++) { 
  setTimeout(a(i),1000); 
}

报错：

TypeError: "callback" argument must be a function
at setTimeout (timers.js:421:11)
……

百度了下，原来 setTimeout 不支持传带参数的函数，可以再用一个匿名函数包装下它吧，见下面代码：

function a(i){ 
  console.log(i);  
}
for (var i = 0; i < 5; i++) { 
  setTimeout(function(){ //用匿名函数包装
    a(i);
  },1000); 
}

总结

以上所述是小编给大家介绍的for循环 + setTimeout 结合一些示例(前端面试题），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# for # 循环与settimeout # js前端面试题及答案整理（一） # 整理一些最近经常遇到的前端面试题 # 前端面试知识点锦集（JavaScript篇） # js前端面试之同步与异步问题详解 # 常见前端面试题及答案 # 一次围绕setTimeout的前端面试经验分享 # 前端面试题及答案整理(二) # 「中高级前端面试」JavaScript手写代码无敌秘籍（推荐） # 收集前端面试题之url、href、src # 前端面试知识点目录一览 # Vue面试题及Vue知识点整理 # 关于vue面试题汇总 # 2019年度web前端面试题总结(主要为Vue面试题) # 回调 # 解决办法 # 小编 # 都是 # 延迟时间 # 还没有 # 是有 # 在此 # 给大家 # 这个时候 # 不支持 # 再用 # 报错 # 不属于 # 在前 # 这是因为 # 你会发现 # 所述 # 里了 # 给我留言

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：sumif函数怎么使用_sumif函数的使用方法【教程】

下一篇：解决频繁的Linux系统日志错误方法

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：sumif函数怎么使用_sumif函数的使用方法【教程】

下一篇：解决频繁的Linux系统日志错误方法