js定时器——使代码输出0-9

最新推荐文章于 2024-08-06 11:36:33 发布

ShiningDays

最新推荐文章于 2024-08-06 11:36:33 发布

阅读量649

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/ShiningDays/article/details/126734395

前端专栏收录该内容

24 篇文章

订阅专栏

本文详细探讨了JavaScript中定时器结合闭包实现的不同效果，包括每隔一秒输出固定数值、动态变化的计数和避免undefined值的问题。通过实例解析了let变量的作用域和setTimeout参数传递，揭示了编程技巧背后的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、for(var i=0;i<10;i++){ setTimeout(() => { console.log(i) }, 1000); }
每间隔1s输出10，10，10，10，10，10，10，10，10，10
2、定时器+闭包
每间隔1s输出0，1，2，3，4，5，6，7，8，9

for(let i=0;i<10;i++){
    //闭包加定时器+i
    setTimeout(((e) => {
        return function(){
            console.log(e)
        }
     })(i), 1000);    
}

2、输出10个undefined

for(let i=0;i<10;i++){
    //定时器+i(形参)//未传入参数，所以都为undefined
    setTimeout((i) => {
        console.log(i)
    }, 1000);  
}

3、每间隔1s输出0，1，2，3，4，5，6，7，8，9

for(let i=0;i<10;i++){
    setTimeout(() => {
        console.log(i)
    }, 1000);  
}

注：利用 let 变量的特性 — 在每一次 for 循环的过程中，let 声明的变量会在当前的块级作用域里面（for 循环的 body 体，也即两个花括号之间的内容区域）创建一个文法环境（Lexical Environment），该环境里面包括了当前 for 循环过程中的 i。
4、利用 setTimeout 函数的第三个参数，会作为回调函数的第一个参数传入

```javascript
for(let i=0;i<10;i++){
    //定时器+i(形参)//未传入参数，所以都为undefined
    setTimeout((i) => {
        console.log(i)
    }, 1000,i);  
}

注：对2的改进，setTimeout的第三个参数的回调函数的实参