js执行顺序:

news2024/11/16 21:21:48

 这篇笔记摘录来源:

👉我是javascript,2分钟彻底弄懂我的执行机制?【JavaScript教程】_哔哩哔哩_bilibili

👉js执行顺序_前端小白,请多指教的博客-CSDN博客 

目录

面试题: 

一、单线程

 二、定时器

案例一:

案例二: 

三、关于异步任务:

案例:

执行机制图解(图是:js执行顺序_前端小白,请多指教的博客-CSDN博客):

面试题: 

  (async function () {
        return new Promise((resoive, reject) => (
            setTimeout(() => {
                console.log('1');
            }, 0)
        ))
    });
    setTimeout(function () {
        console.log('2');
    }, 0);

    Promise.resolve(null).then(() => {
        console.log('3');
    }).then(() => {
        console.log('4');
        return Promise.reject();
    }).catch(() => {
        console.log('5');
    });

    console.log('6');

//63452

 

一、单线程

        js是单线程的,所有的同步任务都是按顺序依次执行的,前面的执行完了之后才会执行后面的任务。遇到计算量大的代码就会阻塞在这里。下面的代码就是打印输出10000次,当循环走完了之后 才会走后面的代码,输出的时间是175ms

        let starTime = new Date().getTime();
        for (let i = 0; i < 10000; i++) {
            console.log(i);
        };
        let endTime = new Date().getTime();
        console.log(endTime - starTime + 'ms');

 二、定时器

        js虽然是单线程,但是我们并不需要所有的代码都要依次执行,避免一些不必要的阻塞。所以就引入了事件循环队列。引入了事件循环队列之后,就将js中所有的代码分成了两大类 ,一类是同步代码,另一类是异步代码。同步代码的执行顺序总是早于异步代码。 可以理解成,js从上到下依次执行,遇到同步的就直接执行,遇到异步的,就将异步的代码放到最后再执行。

案例一:

        let starTime = new Date().getTime();
        setTimeout(() => {
            console.log('定时器的代码执行时间在:', 
            new Date().getTime() - starTime + 'ms')
        }, 3000)

        console.log('定时器之后的代码执行时间在', 
            new Date().getTime() - starTime + 'ms')

        //打印结果:定时器之后的代码执行时间在 0ms
        //打印结果:定时器的代码执行时间在: 3009ms

案例二: 

        console.log('同步1');
        setTimeout(() => {
            console.log('异步1')
        }, 0);
        console.log('同步2');
        setTimeout(() => {
            console.log('异步2')
        }, 0);
        console.log('同步3');
        //打印结果:
        //同步1
        //同步2
        //同步3
        //异步1
        //异步2

三、关于异步任务:

        异步任务有哪些?定时器,ajax异步请求,promise.then里的东西 等等

        任务队列又分成两个,一个是宏任务队列,一个是微任务队列。微任务队列里的任务要优先于宏任务队列里的任务;

        宏任务:定时器等;

        微任务:promise.then()里的代码,promise是同步的,ajax异步请求等;

案例:

        let promise = Promise.resolve(1);
        console.log('同步1');
        setTimeout(() => {
            console.log('宏任务:定时器')
        }, 0);
        promise.then(() => {
            console.log('微任务:promise里的console');
            setTimeout(() => {
                console.log('宏任务:promise里的定时器')
            }, 0);

        });
        console.log('同步2');

        //同步1
        //同步2
        //微任务:promise里的console
        //宏任务:定时器
        //宏任务:promise里的定时器

执行机制图解(图是:js执行顺序_前端小白,请多指教的博客-CSDN博客):

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/642394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

十年软件测试经验,我的成长之道

有很多小伙伴问&#xff0c;测试职业的天花板是不是很低&#xff1f; 在回答这个问题之前&#xff0c;我想请大家先想一下&#xff0c;当初自己为什么会选择测试这个职业&#xff1f;入门门槛低&#xff1f;不需要写代码&#xff1f;工作比开发轻松&#xff1f;还是其他。这个…

科技政策 | 工业和信息化部办公厅关于组织申报2023年跨行业跨领域工业互联网平台的通知

原创 | 文 BFT机器人 6月1日工业和信息化部办公厅发布关于组织申报2023年跨行业跨领域工业互联网平台的通知&#xff1b;旨在贯彻《国务院关于深化“互联网先进制造业”发展工业互联网的指导意见》&#xff0c;落实《工业互联网创新发展行动计划&#xff08;2021-2023年&#…

还有多少公司在使用H5?不怕被破解吗?

H5还有人在用吗 近几天&#xff0c;老板让我调查一下现在市面上H5的使用现状。粗略地调查了一下&#xff0c;发现现在使用H5的真不多了&#xff0c;但是还是有人在用H5的&#xff0c;原因无非一是成本低&#xff0c;相比户外广告&#xff0c;H5制作费用根本不值一提&#xff1…

Delta 一个新的 git diff 对比显示工具

目录 介绍git diff 介绍delta介绍 一、安装1.下载 Git2.下载 delta3.解压4.修改配置文件5. 修改主题6.其他配置和说明 二、对比命令1.在项目中 git diff 常用命令2.对比电脑上两个文件3.对比电脑上的两个文件夹 三、在Git 命令行中使用效果四、在idea 的Terminal命令行中使用效…

展览展会邀请媒体现场报道需要注意什么?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 真开心今天与大家分享展览展会邀请媒体的一些经验&#xff0c;行业复苏&#xff0c;各行各业都充满了活力&#xff0c;每天胡老师都会接到大大小小展会邀请媒体报道的需求&#xff0c;那…

终端数据防泄漏

场景描述 科技研发类公司在日常工作中&#xff0c;存在员工对源代码数据有意或者无意的传播。软件企业作为以源代码数据为核心资产的行业&#xff0c;如果数据安全管理不规范&#xff0c;会出现员工把核心数据一锅端&#xff0c;使企业失去竞争力&#xff0c;造成不可估计的损…

代码随想录算法训练营第五十六天|583. 两个字符串的删除操作|72. 编辑距离

LeetCode583. 两个字符串的删除操作 动态规划五部曲&#xff1a; 1&#xff0c;确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a;dp[i][j]&#xff1a;以i-1为结尾的字符串word1&#xff0c;和以j-1位结尾的字符串word2&#xff0c;想要达到相等&#…

自己尝试在springboot2.0微服务中内嵌一个FTP Server

1.pom.xml添加依赖 <dependency><groupId>org.apache.ftpserver</groupId><artifactId>ftpserver-core</artifactId><version>1.2.0</version></dependency> 2.yml文件添加Ftp服务参数 3.增加apache.ftpserver专用配置文件 文…

OWASO 之认证崩溃基础技能

文章目录 一、burp爆破用法1.Attack type爆破方式设置2.payload处理3.请求引擎设置4.攻击结果设置5.grap匹配设置 二、常见端口与利用1、文件共享2、远程连接3、Web应用4、数据库 三、爆破案例经验1、暴力破解攻击产生的5个原因或漏洞2、猜测用户名方法3、猜测密码方法 四、实验…

第七十三天学习记录:计算机硬件技术基础:微型计算机基础

一、微型计算机的组成&#xff1a; 微型计算机由硬件和软件两大部分组成&#xff0c;硬件是指构成微型计算机的物理实体或物理装置&#xff0c;包括微型计算机的微处理器、储存器、总线接口电路和外部设备&#xff0c;以及电源和机械构件等。软件是指微型计算机所使用的各种程…

Python3数据分析与挖掘建模(11)多因子:复合分析-分组分析与实现示例

1. 分组分析 1.1 概述 分组与钻取是数据分析中常用的技术&#xff0c;用于对数据进行聚合和细分分析。它可以帮助我们从整体数据中获取特定维度的汇总信息&#xff0c;并进一步钻取到更详细的子集数据中进行深入分析。 分组&#xff08;Grouping&#xff09;是指根据某个或多…

SciencePub学术 | 国内高口碑重点SCIEI征稿中

SciencePub学术 刊源推荐: 国内高口碑重点SCI&EI征稿中&#xff01;期刊质量高&#xff0c;接收领域广。信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 国内高口碑重点SCI&EI &#x1f4cc;【期刊简介】IF&#xff1a;7.5-8.0&#xff0c;JCR…

python高级-socket和web相关

目录 一、socket 1.客户端开发 2.tcp客户端 3.tcp服务端 4.连接的注意事项 5.多任务服务端 二、静态web 1.请求报文 2.响应头 3.静态web服务器 4.socket静态页面 5.多进程模拟404和200状态码 6.面向对象多任务 结语 一、socket 1.客户端开发 创建客户端套接字对…

anaconda ubuntu安装

1、下载anaconda 地址&#xff1a;https://www.anaconda.com/download#downloads 我是x86 64位系统&#xff0c;所以选择第一个 2、安装 执行命令&#xff1a; sh Anaconda3-2023.03-1-Linux-x86_64.sh中间会有几个过程 enter 确定 yes 确定 最后默认安装位置为&#xff1…

const、let、var区别

const、let、var区别 0、前言1、区别2、示例2.1 提前调用报错2.2 const与 let 定义的变量不能重复2.3 const与 let定义的变量如果在{}中只能在{}中调用2.4 const定义的变量不能重复赋值。 0、前言 let和const是ES6新增的声明变量的关键词&#xff0c;之前声明变量的关键词是var…

SpringBoot+mybatis教务管理系统

项目介绍 主要功能&#xff1a; 这个项目是一个教务管理系统&#xff0c;其中有三种角色&#xff1a;管理员&#xff0c;教师&#xff0c;学生 管理员权限&#xff1a; 管理员&#xff1a;对课程、学生信息、教师信息等进行增删改查&#xff0c;修改个人密码&#xff0c;修改学…

服务日志性能调优,由log引出的巨坑

只有被线上服务问题毒打过的人才明白日志有多重要&#xff01; 谁赞成&#xff0c;谁反对&#xff1f;如果你深有同感&#xff0c;那恭喜你是个社会人了&#xff1a;&#xff09; 日志对程序的重要性不言而喻&#xff0c;轻巧、简单、无需费脑&#xff0c;程序代码中随处可见…

新项目之初性能测试工作如何前移?

最近刚接手一个新项目&#xff0c;在最开始的时候要求对这个项目做性能测试&#xff0c;产品经理也给不出性能需求&#xff0c;只因为这个项目是电商项目&#xff0c;可能会有高并发&#xff0c;秒杀的场景&#xff0c;所以产品经理要求我们对这个项目必须做性能测试&#xff0…

Linux内核中内存管理相关配置项的详细解析16

接前一篇文章&#xff1a;Linux内核中内存管理相关配置项的详细解析15 三十五、Data Access Monitoring 此项展开后如下图所示&#xff1a; “DAMON: Data Access Monitoring Framework”项默认不选中。如果将其选中&#xff0c;则页面变为&#xff1a; 1. DAMON: Data Access…

关于 vue2 后台管理系统构建 vue2+mock.js 的经典案例

一&#xff0c;初识 Mock.js 1.什么是 mock.js: 主要是模拟数据生成器&#xff0c;可以生成随机数据&#xff0c;拦截器 Ajax 请求 2.为什么要使用 mock.js 由于很多学生在学习过程中&#xff0c;后端还没有做好接口&#xff0c;写好接口文档&#xff0c;有了mock.js 前端就…