js中的宏任务与微任务,同步与异步

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTic
  • 这里我们重点关注 标红的

setTimeout(()=>{

console.log("1");

})


Promise.resolve().then(
    value => {
        console.log("2")
    }
)


console.log("3");

js中的宏任务与微任务,同步与异步_第1张图片

解读一下执行过程:

首先刚开始整个Script代码是一个宏任务,初始栈为空,单线程空闲。

于是开始执行这个宏任务,发现setTimeOut函数,是一个宏任务,于是将其放到宏任务队列。

接下来,发现then括号里面的函数,将其放到微任务队列。再接下来,看到同步代码,直接执行,输出3.

然后因为微任务是优先于宏任务的,所以先看微任务队列,发现有事务,所以输出2,然后再去宏任务队列,发现有事务,所以输出1

setTimeout(()=>{

console.log("1");

},2000)



for(let i=0;i<5000;i++) console.log("")

再看一下这个例子

 先是执行了5000次for循环,然后才输出1,那么setTimeout这个宏任务是什么时候放到队列里面的呢,答案就是后面的2s,所以这个2s不是说我执行完for循环以后过两秒再执行,而是一旦读取到setTimeout代码后过两秒就把它放到相应的队列里面去,像例子这样执行完for循环就立马输出1了。

setTimeout(()=>{

console.log("1");

},2000)
setTimeout(()=>{

console.log("2");

},2000)


for(let i=0;i<5000;i++) console.log("")

js中的宏任务与微任务,同步与异步_第2张图片

 我们得明白一点,定时器1是优先于定时器2进入队列的,所以先输出1,再输出2

setTimeout(()=>{

console.log("1");

},2000)

new Promise(function(resolve){

console.log("2");
resolve();
}).then(()=>console.log("3"))

console.log("4")

js中的宏任务与微任务,同步与异步_第3张图片

 promise里面构造函数是同步代码,所以先执行2,4

然后依次去为微任务队列和宏任务队列去执行相应的事务

你可能感兴趣的:(java,javascript,开发语言)