JS运行机制

JS是单线程的,因此同一时间只能干一件事。

任务队列中包含同步任务和异步任务,异步任务要挂起;同步任务执行完才会去执行异步任务

Event Loop事件循环:运行栈运行的是同步任务。浏览器识别了事件是一个异步任务,就不会把它放在运行栈里,而是拿走。拿走了之后也不是立马放在异步队列中,而是当同步任务执行完以后,再放入异步队列。如果运行栈里没有任务了,就开始执行异步任务。执行完后如果运行栈里没有任务了,再监听异步队列,这个循环的过程就是EventLoop。

什么时候会开启异步任务?

  1. setTimeout,setInterval
  2. DOM事件
  3. ES6中的promise
setTimeout(function () {
    console.log('setTimeout');
},0);
console.log('Hi');

//输出结果
Hi
setTimeout

/*
*setTimeout是异步任务,会在console.log('Hi');执行之后才执行
*/

关于async await promise setTimeout的执行顺序:

  • promise优先于setTimeout
  • promise创建后会立即执行
  • await后面的函数执行完毕后才会让出线程
async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2(){
  console.log('async2')
}
console.log('script start')
setTimeout(function(){
  console.log('setTimeout') 
},0)  
async1();
new Promise(function(resolve){
  console.log('promise1')
  resolve();
}).then(function(){
  console.log('promise2')
})
console.log('script end')

//输出结果
script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

详细解读参考:https://www.cnblogs.com/geyouneihan/p/9127324.html

猜你喜欢

转载自www.cnblogs.com/jingmi-coding/p/9290397.html