1.同步和异步的区别

我们都知道JS里面有同步和异步的区别，怎么理解同步和异步呢。一家餐厅吧来了5个客人，同步的意思就是说，来第一个点菜，点了个鸡，厨师去捉鸡杀鸡，过了半小时鸡好了给第一位客人，开始下位一位客人，就这样一个一个来，按顺序来相同。异步的意思就是来第一位客人，点什么，点鱼，给它一个牌子，让他去一边等吧，下一位客人接着点菜，点完接着点让厨师做去吧，哪个的菜先好就先端出来。今天主要结束

2.setTimeout函数

2.1函数执行的顺序

我们今天通过setTimeout函数来理解一下异步，通过这个例子大家可以更好的理解。

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}//打印出6个6

图片.png

大家肯定很意外为什么是打印出6个6，而不是0，1，2，3，4，5，接下来就跟大家来解释一下这个函数的执行顺序，setTimeout函数表示过一会在执行，所以上面这个函数的执行顺序为：
1.i赋值为0
2.判断i < 6 ?,满足进入第一循环
3.setTimeout()会过一会执行–>跳过setTimeout()继续执行
4.执行i++，此时i的值为1
5.判断i < 6 ?,满足进入第二循环
6.setTimeout()会过一会执行–>跳过setTimeout()继续执行
7.执行i++，此时i的值为2
省略…
执行i++，此时i的值为6
判断i < 6 ?,不满足跳出循环
执行第一次循环的setTimeout() //打印出a
执行第二次循环的setTimeout() //打印出a
执行第三次循环的setTimeout() //打印出a
执行第四次循环的setTimeout() //打印出a
执行第五次循环的setTimeout() //打印出a
执行第六次循环的setTimeout() //打印出a
结束

2.2setTimeout过一会儿执行怎么理解

意思就是不用再等多少秒了，就是当同步任务的函数和语句执行完后，0秒或者立刻执行setTimeout函数了。

2.3那如果想要打印出0、1、2、3、4、5呢？

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

图片.png

所以这样就可以啦

2.4其他方法解决（利用 const 关键字）

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

图片.png

这样就可以啦~
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.