程序使用定时器来打印输出内容
如下代码
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的问题