事件循环的理解

强壮的小白菜

于 2024-05-19 11:27:55 发布

阅读量315

点赞数 7

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_43893277/article/details/139039738

版权

前端专栏收录该内容

4 篇文章

订阅专栏

事件循环就是不断的从消息队列中拿任务
JavaScript 是单线程的语言，这意味着一次只能执行一个任务。
最开始的时候、渲染主线程会进入一个无线循环
每一次循环会检查消息队列中是否有任务存在，如果有就取出第一个任务执行，执行完成后进入下一次循环，没有则进入休眠状态
其他所有线程（包括其他进程的线程）可以随时向消息队列中添加任务，新任务会添加到消息队列的末尾

在这里插入图片描述

代码示例

渲染主线程通知交互线程监听按钮点击
交互线程监听按钮点击,发现点击事件里面有函数需要执行，于是乎，交互线程就会把函数包装成任务放到队列
渲染主线程从消息队列中取出任务，设置dom文本，浏览器需要重新渲染，重新绘制，于是乎产生了一个绘制任务，执行绘制任务需要到队列中重新排队
渲染主线程继续执行后面代码（死循环3秒）
渲染主线程执行完死循环后，再从队列中取出绘制任务，渲染页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Delay Example</title>
  </head>
  <body>
    <h1 id="h1">Hello World</h1>
    <button id="btn">Click Me</button>

    <script>
      function delay1(duration, callback) {
        setTimeout(callback, duration);
      }
      //JavaScript 是单线程的语言，这意味着一次只能执行一个任务。
      // 当调用 delay2(3000) 时，主线程会进入一个 while 循环。
      // 在这个循环中，JavaScript 引擎会不断地计算当前时间与 start 之间的差值，直到差值大于等于 duration（例如 3000 毫秒）。
      function delay2(duration) {
        var start = Date.now();
        while (Date.now() - start < duration) {}
      }
      //setTimeout 或 Promise 可以实现非阻塞的延迟。这些方法会将延迟任务推入事件队列，等待主线程空闲时执行，而不会阻塞主线程

      //渲染主线程通知交互线程监听按钮点击
      //交互线程监听按钮点击,发现点击事件里面有函数需要执行，于是乎，交互线程就会把函数包装成任务放到队列
      //渲染主线程从消息队列中取出任务，设置dom文本，浏览器需要重新渲染，重新绘制，于是乎产生了一个绘制任务，执行绘制任务需要到队列中重新排队
      //渲染主线程继续执行后面代码（死循环3秒）
      //渲染主线程执行完死循环后，再从队列中取出绘制任务，渲染页面
      document.getElementById("btn").onclick = function () {
        document.getElementById("h1").textContent = "666";

        //不会阻塞主线程
        // delay1(3000,function () {
        //     console.log("666")
        // })

        //会阻塞主线程
        delay2(3000);
        
      };
    </script>
  </body>
</html>