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

最新推荐文章于 2023-02-16 12:18:40 发布

前端小生一枚

最新推荐文章于 2023-02-16 12:18:40 发布

阅读量980

点赞数

CC 4.0 BY-SA版权

分类专栏：基础知识复习巩固文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_33699819/article/details/88874467

基础知识复习巩固专栏收录该内容

40 篇文章

订阅专栏

本文探讨了在JavaScript中，for循环与setTimeout函数结合使用时出现的问题及解决方案。场景一是按顺序输出索引值，由于作用域问题导致实际输出了5个5。解决方法包括使用匿名函数和将var替换为let。场景二是为li元素绑定事件，点击时弹出对应索引，但由于事件延迟执行，所有点击都显示为5。针对此问题，文章提出了使用匿名函数等几种解决方案。

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

场景一：我们想按顺序输出对应的索引值，代码如下：

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

可是会连续输出5个5。

解决办法一：匿名函数

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

解决办法二：直接把var改成let

for(let i =0; i<5; i++) {
    setTimeout(function() {
        console.log(i);
     },1000);  
}
//0 1 2 3 4

场景二：给li元素绑定事件，点击每个li元素弹出对应的索引

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>for循环</title>
  </head>
  <body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
    <script>
        var li=document.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            li[i].onclick = function(){
                console.log(i);
            }   
        }
    </script>
  </body>
</html>

运行的时候发现点击任何一个li都打印的是5，原因是在点击li元素时，触发点击事件，此时for循环已经结束，其中得 i 已经变为5。因此触发事件中console.log(i)函数打印的永远是5。

解决办法一：使用匿名函数

for(var i=0;i<li.length;i++){
   (function(i){
       li[i].onclick = function(){
           console.log(i);
       }
    })(i)
}

解决办法二：

var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
    li[i].index = i; //给每个li定义一个属性索引值，赋
    li[i].onclick = function(){
         console.log(this.index);    // 索引值从0开始
    }
}

解决办法三：

var li=document.getElementsByTagName("li");
for(var i = 0; i<li.length; i++){
    li[i].onclick = function(n){
    　　return function(){
             console.log(n);    // 索引值从0开始
       }
    }(i)
}