js 事件循环机制

js 的非阻塞I/O  就是由事件循环机制实现的

众所周知  js是单线程的 也就是上一个任务完成后才能开始新的任务 

那js碰到ajxa和定时器、promise这些异步任务怎么办那?这时候就出现了事件队列。

js的主要执行栈 称为主栈

用ajax举例:

  代码执行的时候如果遇到ajax怎么办,ajax事件的实现 是浏览器上的一个功能或者说是线程,当js主栈执行到ajax事件,js会告诉浏览器让浏览器去请求,然后js主栈不会去等ajax是否请求成功,js主栈继续执行,等所有js的同步任务执行完之后,js主栈就会读取这个“事件队列”了,把事件队列里面的第一个事件,压入主栈执行,那么事件队列的里的事件是怎么来的那?(主线程从"事件队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环))

  刚才说过js的主栈执行到ajax事件,js会告诉浏览器让浏览器去请求,然后浏览器请求并且返回结果,那么那他会把,ajax的回调函数放到事件队列的尾部,ajax完成时间是不定的,如果网络延迟它可能很慢才有结果,这个时候 js的主栈把所有任务都执行完毕了,而且因为ajax没有返回结果,那么js主栈的主栈会循环不断的查看事件队列里面有没有可执行的事件(回调函数),也就是说ajax什么时候返回,js主栈什么时候执行ajax的回调函数。(其他的异步任务也是一样的,promise是直接把当前的回调函数放到事件队列里面)

  上面说的事件循环机制,就形成为了非阻塞I/O。

  下面举个例子来测试一下吧:

   这里说明下,setTimeout()也是浏览器上的,他没有设置时间,但是setTimeout()最快执行速度3毫秒(注意这里说的是最快执行速度)说明他的时间是不准确的。

  Promise是立刻向事件队列里面添加一个回调函数,所以比setTImeout快。这也就能解释他的执行顺序了。

  刚才我说setTimeout 执行时间是不准确的,如果设置setTimeout 执行时间是5毫秒,是因为他最后执行完是向事件队列里面添加的,如果我的主栈的的代码计算量庞大,是10毫秒,那么你们想想,执行setTimeout回调的时间不就是10毫秒了吗?

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值