0
点赞
收藏
分享

微信扫一扫

JS宏任务与微任务


js是单线程语言。也就是干活的时候只能有一个人来干活。举个生活中的例子,我每天都会有很多的事情,吃饭上班坐车打卡,这些事情时刻只能做一件事情, 我会把其他的事情放在一个任务列表里面,等我手上事情做完了,我会接着继续做任务列表里面的事情。

JS宏任务与微任务_i++

JS宏任务与微任务_for循环_02

我用ps给大家画了一张图,个人感觉一看就明白啦

JS宏任务与微任务_单线程_03

那么问题来了,如果碰到for循环一万次打印出来是什么呢?

setTimeout(() => {              console.log('定时器')        }, 0)        console.log('后盾人')        for (let i = 0; i < 10000; i++) {            console.log('打印循环1万次')        }

JS宏任务与微任务_前端_04

所以得到的结论就是,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万次')        }

JS宏任务与微任务_javascript_05


如果setTimeout里面的时间不一样呢?

 setTimeout(() => {              console.log('定时器11111')        }, 2000)        setTimeout(() => {            console.log('定时器2222')        }, 1000)        console.log('后盾人')        for (let i = 0; i < 10000; i++) {            console.log('打印循环1万次')        }

JS宏任务与微任务_前端_06

很显然就是先执行的还是先执行,后面依然依次排队。

接下来我们看看微任务,很典型的就是promise,promise构造函数是立即执行的,它是同步任务。

JS宏任务与微任务_i++_07

JS宏任务与微任务_for循环_08

至此,小伙伴应该都清楚了,来个小练习吧。

  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("后盾人")

JS宏任务与微任务_单线程_09

画一张图方便理解,先执行1大块代码,后执行2。2宏任务里面又有promise,其实只要把他们关系理2清楚,这题也就很简单了。

JS宏任务与微任务_i++_10

举报

相关推荐

0 条评论