1,对于一个基本的for循环,顺序输出变量值。
for(var i = 0; i < 4; i++){ console.log(i);//结果不多说了吧 }
2,如果for循环中有定时器,如下代码。
for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000*i); }
setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,开始输出一个 5(1000*0),然后每隔一秒再输出一个 5,一共 5 个 5。”
3,如果要得到每一秒输出i的正确结果,就要引入闭包来保存变量i不被销毁。
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}
4,如果要实现,每隔3s输出一个数字,即,3s输出1,3s后再输出2...,就要对定时器时间设置
for (var i = 0; i < 4; i++) { (function(a) { setTimeout(function() { console.log(a); }, a*3000); //..... })(i) }
实际上,for循环很快,上述代码类似于同时启动3个定时器,只需要确保时间不一样即可。在此,时间分别是3s,6s,9s,由于同时启动,但是执行时间不同,各个时间间隔都是3s。巧妙地达到了目的。
案例4的实际用处如下:
for (var i = 0; i < 1000; i++) {
(function(a) {
setTimeout(function() {
console.log(a);
$(‘#div1‘).removeClass().addClass(‘r‘+a);
$(‘#div1‘).html(a);
}, a*60);
})(i)
}
但是在数字大于5位数的时候,明显会有卡顿甚至引起浏览器奔溃。
时间: 2024-11-10 06:37:18