js 解决f按键事件冲突_事件循环机制最简单的理解

最新推荐文章于 2022-08-02 17:44:28 发布

weixin_39732316

最新推荐文章于 2022-08-02 17:44:28 发布

阅读量275

点赞数

文章标签： js 解决f按键事件冲突

本文链接：https://blog.csdn.net/weixin_39732316/article/details/112078824

版权

最近看前端比较飘，都是手写的笔记，但是题主的记性经常离家出走，所以总是想复盘，可是题主又懒得打字，所以最终决定开始用代码+视频来走一遍前端基础，emmm，题主的普通话不好，但是写代码嘛，就不计较这么多啦哈哈哈

本文关键字：事件循环机制同步任务异步任务执行上下文作用域链宏任务微任务 promise

event loop（链接宏任务，微任务https://www.zhihu.com/video/1244643175106777088

本文参考文章：

http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.htmlwww.dailichun.com

作者大大写得很好，欢迎小伙伴们观摩（也就是视频里边左边的url哈哈哈，好东西要一起分享呀*-*）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event loop</title>
</head>
<body>
<div class="div">
  <p>事件循环机制  </p>
  <img src="F:js学习文包imgbrowser_inner_thread.png" alt="">
 
  <p>同步任务 异步任务</p>
  <img src="F:js学习文包imgjs_event_loop2.png" alt="">
  <p>执行上下文 作用域链</p>
  <img src="F:js学习文包imgscope-chain.png" alt="">
  <p>宏任务 微任务</p>
  <p>主代码块（同步任务）计时器 ajax dom操作</p>
  <span>微任务 promise的then </span> 
  <p> microtask中的所有微任务都是添加到微任务队列（Job Queues）中，</p> 
  <p>  microtask中的所有微任务都是添加到微任务队列（Job Queues）中，等待当前macrotask执行完毕后执行，而这个队列由JS引擎线程维护 （这点由自己理解+推测得出，因为它是在主线程下无缝执行的）
  <p>console.log('script start');
   <br> setTimeout(function() {
    <br>    console.log('setTimeout');
   <br>  }, 0);
    <br> let p1 =new Promise((resolve,reject)=>{
     <br> console.log('没有.then的promise1'),
     <br>   resolve()
    }
    )
   <br> Promise.resolve().then(function() {
   <br>     console.log('promise2');
   <br> }).then(function() {
       <br> console.log('promise3');
    <br> });
    
    <br> console.log('script end');</p>
</p>
</div>
<script>
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0);
let p1 =new Promise((resolve,reject)=>{
    console.log('没有.then的promise1'),
    resolve()
}
)
Promise.resolve().then(function() {
    console.log('promise2');
}).then(function() {
    console.log('promise3');
});

console.log('script end');
    </script>
   

</body>

</html>