JS的事件循环机制

一 JS的运行机制

JavaScript是一门单线程语言,单线程意味着在一个时间点内只能做一件事。

二 同步与异步的产生原因

因为JS是单线程的,同一时间只能做一件事,JS引擎就会有多余的时间,为了解决单线程所造成的这个问题,提出了同步和异步的执行模式。

2.1同步(阻塞)

同步执行模式就是JS会严格按照原本单线程逻辑,从上到下,从左到右的执行代码逻辑。

2.2异步(非阻塞)

在执行JS代码时先逐步执行同步代码,遇到异步代码先将异步代码放到任务队列中,直到同步代码执行完璧才执行异步代码。

小结:JS执行顺序按照单线程模式运行,同步先执行,异步后执行。所有的异步任务都要等待当前的同步任务执行完成后执行。

任务队列中将异步任务划分为宏任务和微任务。

三 JS中的宏任务与微任务

常见的宏任务与微任务

宏任务: setTimeout setInterval ajax Dom事件

 微任务:promise.then/finally/catch   async/await 隐式创建promise.then

 

事件循环主要是针对解决宏任务,一次事件循环只能处理一个宏任务,执行宏任务的时候会进行一次轮询,看有没有微任务,如果有微任务将会把微任务执行全部执行完毕,在执行宏任务。

小案例:

1:

// // 事件循环 
setTimeout(function () {   //setTimeout 宏任务
  console.log('1');
});
async function test(){
	console.log('5')
	await async2();
	// 隐式创建一个微任务 promise.then()
	console.log('6')
}
new Promise(function (resolve) {
  console.log('2');
  resolve();
}).then(function () {
  console.log('3');
}).finally(()=>{
	console.log('8');
})
function async2(){
	console.log('7');
}
test()
console.log('4');

//2 5 7 4 3 6 8 1



2:

async function async1() {
  console.log(1);
  const result = await async2();
//   隐式创建一个微任务 相当于promise.then()
  console.log(3);
}
async function async2() {
  console.log(2);
}
Promise.resolve().then(() => {
  console.log(4);
});
setTimeout(() => {
  console.log(5);
});
async1();
console.log(6); 

// 1 2 6 4 3 5

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js事件循环机制是一种用于管理和执行任务的机制。在js中,事件循环机制负责处理用户交互事件、异步操作和定时任务等。 事件循环机制的核心是事件循环和任务队列。当有事件发生时(如用户点击按钮),事件被加入到任务队列中。js引擎会持续地从队列中取出任务并执行,直到队列为空。 任务分为两种类型:宏任务和微任务。宏任务包括用户交互事件、定时任务等,而微任务主要是由Promise对象的then方法产生的任务。在每次事件循环中,js首先执行当前宏任务,然后执行所有微任务,然后对页面进行重绘和渲染,然后进入下一次事件循环事件循环机制的重要性在于处理js的异步操作。当遇到一个异步操作时,如网络请求或定时器,js引擎不会立即执行异步任务,而是将其放入任务队列,等到主线程上的任务执行完成后再处理。这就使得js可以同时处理多个任务,提高了程序的性能和响应速度。 需要注意的是,js是单线程执行的,即每次只能执行一个任务。所以当一个任务执行时间过长时,就会造成页面的卡顿和无响应。因此,我们需要合理地使用事件循环机制,将耗时的任务分解为小块的异步任务,以保证页面正常运行和用户体验。 总而言之,js事件循环机制是一种用于管理和执行任务的机制,它通过任务队列和事件循环的方式,实现了js的异步处理,提高了程序的性能和响应速度。掌握事件循环机制对于编写高效并且流畅的js代码是非常重要的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值