当js中的for循环遇到延时器或者定时器时需要注意的问题

image.png

当你在for循环里写if判断,再加延时器或者定时器时,一定要保存当前的i的值,再做处理,否则你拿到的i的值会是for循环里最大的那个;

for (var i = 0; i < 10; i++) {  
            if(i == 5){  
                setTimeout(aa,2000);  
                function aa(){  
                    console.log( "i="+i);  
                }  
            }  
        }  //10

  for (var i=0; i<5;i++) { 
            
            (function(){ //5

                setTimeout(function(){  
                    console.log(i)
                },i*1000)
            })(i);
        }


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


你们觉得会打印出i的值是几?
最终结果会是10!
延时器换做定时器, 最终结果也是一样的;
那么为什么呢?
js读取代码是从上向下读取的,当它读取到i满足if语句的时候并不是停止了,还会继续做循环判断;而此时if语句里面是一个延时器,当延时器的延时时间结束要调用aa函数的时候,for循环已经循环结束,而此时的i已经变为10;
所以打印出来i的值就会是10;

那么怎么解决这个问题呢?看代码

var j = null;  
        for (var i = 0; i < 10; i++) {  
            if(i == 5){  
                j = i;  
                setTimeout(aa,2000);  
                function aa(){  
                    console.log( "i="+j);  
                }  
            }  
        }  
//         var number=50;
//         var obj={
//          number:60,
//          getnum:function(){
//              var number=70;
//              return this.number
//          }
//         }
//        console.log(obj.getnum()) //60 obj
//        console.log(obj.getnum.call()) //50  window
//        console.log(obj.getnum.call({number:20})) //20

这样打印出来的就是我们想要的结果了,没错就是5;
原理就是当满足if语句时,我们用一个变量把当前i的值保存下来;

循环

    // tip 遍历下标
    $('.m25-x-tpp2 .m25-x-ulcom li').each( function(i, e){ $(this).attr("fenge",i) });

js
https://blog.csdn.net/wxl1555/article/details/53719659
call
https://blog.csdn.net/ganyingxie123456/article/details/70855586

你可能感兴趣的:(当js中的for循环遇到延时器或者定时器时需要注意的问题)