js是单线程语言。也就是干活的时候只能有一个人来干活。举个生活中的例子,我每天都会有很多的事情,吃饭上班坐车打卡,这些事情时刻只能做一件事情, 我会把其他的事情放在一个任务列表里面,等我手上事情做完了,我会接着继续做任务列表里面的事情。
我用ps给大家画了一张图,个人感觉一看就明白啦
那么问题来了,如果碰到for循环一万次打印出来是什么呢?
setTimeout(() => { console.log('定时器') }, 0) console.log('后盾人') for (let i = 0; i < 10000; i++) { console.log('打印循环1万次') }
所以得到的结论就是,setTimeont一定要是排队的 ,那么,如果setTimeout是2秒后执行呢?打印出来的值是一样,但是他也是加载就执行的,并不是for循环完全执行再去过2秒钟。他是执行好先放在队列,等到时间的时候直接拿出来。
那如果有多个setTimeout呢?
setTimeout(() => { console.log('定时器11111') }, 2000) setTimeout(() => { console.log('定时器2222') }, 2000) console.log('后盾人') for (let i = 0; i < 10000; i++) { console.log('打印循环1万次') }
如果setTimeout里面的时间不一样呢?
setTimeout(() => { console.log('定时器11111') }, 2000) setTimeout(() => { console.log('定时器2222') }, 1000) console.log('后盾人') for (let i = 0; i < 10000; i++) { console.log('打印循环1万次') }
很显然就是先执行的还是先执行,后面依然依次排队。
接下来我们看看微任务,很典型的就是promise,promise构造函数是立即执行的,它是同步任务。
至此,小伙伴应该都清楚了,来个小练习吧。
setTimeout(() => { console.log('定时器') new Promise(resolve => { console.log("定时器的promise"); resolve(); }).then(() => { console.log('定时器的then') }); }, 2000) new Promise(resolve => { console.log("promise"); resolve(); }).then(() => { console.log('then') }); console.log("后盾人")
画一张图方便理解,先执行1大块代码,后执行2。2宏任务里面又有promise,其实只要把他们关系理2清楚,这题也就很简单了。