js事件循环

最新推荐文章于 2024-07-12 16:27:40 发布

华、、

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量394

点赞数 11

分类专栏： js 事件循环异步文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2201_75918981/article/details/137059882

版权

js 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

异步

2 篇文章 0 订阅

订阅专栏

事件循环

1 篇文章 0 订阅

订阅专栏

本文详细解释了JavaScript的事件循环机制，如何处理同步和异步任务，以及如何通过回调函数和定时器实现异步操作。通过一个示例代码展示了事件循环的工作原理，异步任务在实际中的常见类型也得到了补充。

摘要由CSDN通过智能技术生成

js的事件循环是js的一种执行机制。

众所周知，js是一门单线程的语言，也就是同步的，同一时间只能做一件事情。这是因为浏览器仅分配给了js一个主线程来执行任务，且一次只能执行一个任务。这些待执行的任务排好队伍，依次执行。

但是js某些任务是需要耗时的，例如定时器和ajax的请求操作，HTML5为实现这些任务允许js脚本创建多个线程。于是js中既有同步又有异步了。

同步任务：同步任务都在主线程上执行，形成一个执行栈

异步任务：异步任务通过回调函数实现，异步任务被添加到了任务队列中

一旦同步任务都执行完毕，系统就会依次读取任务队列中的任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

浏览器会反复读取任务队列中的任务，逐个完成任务队列中的任务。这一过程就被称为事件循环。

例如以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    console.log(1)  //首个执行

    console.log(2)  //第二个执行

    setTimeout(function(){
      console.log(3)  //等待10ms后执行，第五个执行
    },10)

    setTimeout(function(){
      console.log(4)  //等待1ms后执行，第四个执行
    },1);

    console.log(5)  //第三个执行

    //打印结果：1 2 5 4 3

  </script>
</body>
</html>

打印结果：1 2 5 4 3

        补充：一般而言，异步任务有以下三种类型：
        普通事件：click、resize等
        资源加载：load、error等
        定时器：setInterval、setTimeout等

华、、

关注

11
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js事件循环

这是因为浏览器仅分配给了js一个主线程来执行任务，且一次只能执行一个任务。但是js某些任务是需要耗时的，例如定时器和ajax的请求操作，HTML5为实现这些任务允许js脚本创建多个线程。于是js中既有同步又有异步了。一旦同步任务都执行完毕，系统就会依次读取任务队列中的任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。浏览器会反复读取任务队列中的任务，逐个完成任务队列中的任务。异步任务：异步任务通过回调函数实现，异步任务被添加到了任务队列中。同步任务：同步任务都在主线程上执行，形成一个执行栈。
复制链接

扫一扫