首页 > 其他分享 >js事件循环

js事件循环

时间:2024-03-26 23:01:59浏览次数:40  
标签:异步 console log js 任务 循环 事件 执行

        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等

标签:异步,console,log,js,任务,循环,事件,执行
From: https://blog.csdn.net/2201_75918981/article/details/137059882

相关文章

  • VS2022软件打包 生成和事后事件处理
    VS2022软件打包生成和事后事件处理 示例目标:将编译后的文件拷贝到新的文件,并重命名方便软件打包 生成前:删除目标目录:rd/s/q"$(SolutionDir)..\setup\$(ConfigurationName)\"生成后-拷贝重命名:copy"$(TargetPath)"$(TargetDir)JCZX-2024.exe"copy"$(TargetPat......
  • 监控工具-jvisualvm.exe-入门,监控tomcat7的jmx、jstatd
    1、添加JMX1.1、catalina-jmx-remote.jar 放在Tomcat的 lib 目录下catalina-jmx-remote.jar 的确切位置可能因Tomcat版本和发行版而异,但通常它应该被放置在Tomcat的 lib 目录下 1.2、catalina.sh设置JVM参数对于Linux/Unix,编辑 catalina.sh 文件......
  • 最详细爬虫零基础教程10——json格式提取之jsonpath
    文章目录一、json数据解析二、案例演示1.解析获得数据2.简化代码3.豆瓣json数据解析总结一、json数据解析用来解析多层嵌套的json数据;JsonPath是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种语言实现版本,包括:Javascript,Python,PHP和Java。语......
  • JS之windows常见事件onload
    //window.onload=function(){//varbtn=document.querySelector('button');//btn.addEventListener('click',function(){//alert('点击我');//})//}//window.......
  • js基础知识进阶版
    雷迪斯andthe乡亲们 欢迎你们来到奇幻的编程世界 回顾一下吧!上篇我们学习了开始使用js、js的输出方式、js的语法、js的数据类型、隐性转换 、 显性转换、js转换为数值、js类型转换的应用、js转换为字符串、js转换为bool类型、js的运算符、js赋值运算符、js的比较运......
  • js的基础知识
    雷迪斯andthe乡亲们 欢迎你们来到奇幻的编程世界 上一篇呢!我的css就完事了,联合我们之前所学的html,就可以制作网页了,大家可以尝试一下。今天我们来学一下js,也挺有意思的,开始吧!js(JavaScript)事件驱动式编程语言,(所有的事件都会有功能来响应)  在浏览器中所有的操作称......
  • Python循环语句:for循环和while循环
    在编程中,有时需要让代码重复多次相似或相同的操作。比如输出列表中的逐个元素,我们通常不喜欢下面这种编程方式:list1=[0,1,2,3,4]print(list1[0])print(list1[1])print(list1[2])print(list1[3])print(list1[4])此时运行结果会依次输出列表的元素,但显然这会让代码......
  • C#JsonConvert.DeserializeObject反序列化与JsonConvert.SerializeObject序列化
    原文链接:https://blog.csdn.net/qq_45451847/article/details/120434797JSONJSON序列化是将对象转换为JSON格式的字符串,而JSON反序列化是将JSON格式的字符串转换为对象。对于JSON大家都了解,JSON是一种轻量级的文本数据交换格式而非编程语言,既然是数据交换格式,那就需要不断的进......
  • 【日常记录】【JS】Clipboard API 剪切板API
    文章目录1、ClipboardAPI2、方法2.1read2.2readText2.3write2.4writeText3、阻止用户复制内容4、在复制的文字后面追加内容5、读取剪切板内容6、让图片插入到剪切板1、ClipboardAPIClipboard接口实现了ClipboardAPI,如果用户授予了相应的权限,其就能提供系......
  • js/jquery:5行代码实现点击按钮复制文字到剪贴板
     方法1:<pid="p1">Hello,I'mTEXT1</p><buttononclick="copyToClipboard_js('p1')">复制文字1(js)</button><script>functioncopyToClipboard_js(element){vartemp=document.createElement(&quo......