let i = 0
for(i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
会打印出来6个6,原因是settimeout函数是等完成当前事件在打印,或者说等一会在打印,所以会打印出来6个6,总结就是调用的时机,settimeout调用console.log的时候i 已经变成6了
2 打印 0、1、2、3、4、5 的方法
for(let i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
猜测原因:let不能重复声明同一变量,所以在新的一次循环开始时,当前的事件已经被完成所以打印出012345
3 其他打出1-6
for(var i = 0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i)
},1000*i)
})(i)
}
调用时机,会决定变量的值,还要结合变量的作用域一起考虑。
1.用 闭包 让其输出 12345
for (var i =1; i<=5;i++){
(function (j) {
setTimeout(function timer() {
console.log(j)
},j*1000);
})(i);
}
//12345
2.利用setTimeout 的第三个参数
for ( var i=1; i<=5; i++) {
setTimeout( function timer(j) {
console.log( j );
}, i*1000, i);
}
附 setTimeout第三个参数
setTimeout 第三以后的参数是作为第一个参数(function())的参数传进的
demo1
function aa(x,y){
console.log(x+y)//4
}
setTimeout(aa,1000,1,3)
demo2
function aa(x,y,z){
console.log(x+y+z)//9
}
setTimeout(aa,1000,1,3,5)
demo3
function aa(x,y,z,q){
console.log(x+y+z+q)//16
}
setTimeout(aa,1000,1,3,5,7)
demoN
var doc=document.getElementById('div');
setTimeout(function(){
doc.style.color='red';
},10000,setTimeout(function(){
doc.style.color='black';
},5000));
上面的结果是,div元素内的字体样式5秒后变黑,10秒后再变红。是不是很惊奇,因为第三个参数也是一个定时器,5后就会开启。和JQuery里面的animate()不同,animate里面回调是执行了前面之后再执行后面的。
3 使用let定义i (let是创建一个块级作用域)
for ( let i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}
{ // 形成块级作用域
let i = 0
{
let ii = i
setTimeout( function timer() {
console.log( ii );/*下面无论多少个i++ 都是0; 如果这里输出的是i 下面 有多个i++ 输出的值 就是几*/
}, i*1000 );
}
i++
{
let ii = i
}
i++
{
let ii = i
}
i++
{
let ii = i
}
}