写代码啦
JS函数setTimeout的小细节
回复数(0) 浏览数(23)
{{topic.upvote_count || 0}} 编辑 回复

首先看一个代码

let i
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

上的代码看起来只是简单的for循环输出i的值。但是当你运行上面代码,你会发现,竟然输出了6个6。

那么我们开始分析这个过程。
setTimeout是个计时函数,后面的0代表着0毫秒后执行。
我们简单的可以理解为,它是等一下才执行。那么这个等一下是多久呢。
我们先运行一下正常的for循环consloe一下数值i

let i
for(i = 0; i<6; i++){
  console.log(i)
}

经过测试,你会发现他正常的输出了0~5的数值。那么6怎么来的呢?
经过思考可以猜到。for最后一次循环,他判断5<6符合条件,他就执行了后面的i++。所以for循环的值最后变成了6。
那么我们知道了6是for循环结束后才出现的。我们可以得出结论

let i
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

这里面的setTimeout他会等for循环运行完后才运行自身的代码。

为了解决这种尴尬的问题,我们可以使用下面两种方法来实现每次循环都正常执行setTimeout。
方法1:
在for循环内添加一个变量,来接收每次for循环的值。

let i
for(i = 0; i<6; i++){
  let j = i
  setTimeout(()=>{
    console.log(j)
  },0)
}

方法2:
在for里面声明变量i

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
{{topic.upvote_count || 0}}

首先看一个代码

let i
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

上的代码看起来只是简单的for循环输出i的值。但是当你运行上面代码,你会发现,竟然输出了6个6。

那么我们开始分析这个过程。
setTimeout是个计时函数,后面的0代表着0毫秒后执行。
我们简单的可以理解为,它是等一下才执行。那么这个等一下是多久呢。
我们先运行一下正常的for循环consloe一下数值i

let i
for(i = 0; i<6; i++){
  console.log(i)
}

经过测试,你会发现他正常的输出了0~5的数值。那么6怎么来的呢?
经过思考可以猜到。for最后一次循环,他判断5<6符合条件,他就执行了后面的i++。所以for循环的值最后变成了6。
那么我们知道了6是for循环结束后才出现的。我们可以得出结论

let i
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

这里面的setTimeout他会等for循环运行完后才运行自身的代码。

为了解决这种尴尬的问题,我们可以使用下面两种方法来实现每次循环都正常执行setTimeout。
方法1:
在for循环内添加一个变量,来接收每次for循环的值。

let i
for(i = 0; i<6; i++){
  let j = i
  setTimeout(()=>{
    console.log(j)
  },0)
}

方法2:
在for里面声明变量i

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
23
回复 编辑