利用闭包解决循环中定时器问题

程序使用定时器来打印输出内容
如下代码

var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            setTimeout(function() {
                console.log(lis[i].innerHTML);
            }, 3000)
        }

在定时器里面的回调函数,是一个异步任务,不会立即执行,而是先放在任务队列中去,等待同步任务执行完加粗样式后才会从任务队列中调用异步任务去执行
此时就会造成一个问题,当for循环这个任务执行完后,i此时已经增加到lis.length了(i=lis.length-1是还在满足循环中执行,i=lis.length是虽然不满足循环条件,但此时i的值已经变成lis.length了)
此时定时器打印的内容中就包含lis.length,就会报错
在这里插入图片描述
解决方法:

var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }

创建一个立即执行函数。每次创建一个立即执行函数之前,都会把当前的i给调用到立即函数里面,就不会出现打印i=lis.length的问题

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值