js中异步事件中容易混淆的 Promise 和 setTimeout 的执行顺序是怎样的?

        setTimeout(() => console.log(1), 0);

        new Promise(function (resolve, reject) {
console.log(2);
//resolve(1);
setTimeout(function(){
console.log(3);
resolve(1);
}, 0);
})
.then(() => {
console.log(4)
}) console.log(5) setTimeout(() => console.log(6), 1000); setTimeout(() => console.log(7), 0); setTimeout(() => console.log(8), 1000);

输出:

    2
    5
    1
    3
    4
    7
    6
    8

如果Promise中不包含异步事件:

        setTimeout(() => console.log(1), 0);

        new Promise(function (resolve, reject) {
console.log(2);
resolve(1);
// setTimeout(function(){
// console.log(3);
// resolve(1);
// }, 0);
})
.then(() => {
console.log(4)
}) console.log(5) setTimeout(() => console.log(6), 1000); setTimeout(() => console.log(7), 0); setTimeout(() => console.log(8), 1000);

输出:

    2
    5
    4
    1
    7
    6
    8

前端知识总结--js异步事件顺序的更多相关文章

  1. JS异步事件顺序:setTimeout,async,promise

    为什么最近更新那么频繁,还不是因为笔试的时候瞎了? 先说异步事件执行顺序的规则: 1. 定时器异步队列和promise队列不是同一队列,promise优先级高于setTimeout; 2. 创建pro ...

  2. js 异步执行顺序

    参考文章: js 异步执行顺序   1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...

  3. 【前端知识体系-JS相关】深入理解JavaScript异步和单线程

    1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...

  4. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  5. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  6. 【前端知识体系-JS相关】JS-Web-API总结

    2.1 DOM操作 2.1.1 DOM的本质是什么? <!-- DOM树:二叉树 --> /* <?xml version="1.0" encoding=&quo ...

  7. 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?

    1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...

  8. 【前端知识体系-JS相关】ES6专题系列总结

    1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...

  9. 【前端知识体系-JS相关】深入理解MVVM和VUE

    1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...

随机推荐

  1. 一台java服务器可以跑多少个线程?

    一台java服务器能跑多少个线程?这个问题来自一次线上报警如下图,超过了我们的配置阈值.   京东自研UMP监控分析 打出jstack文件,通过IBM Thread and Monitor Dump ...

  2. R-CNN论文学习

    Rich feature hierarchies for accurate object detection and semantic segmentation Tech report (v5) pr ...

  3. React之简介

    官网链接React 用于构建用户界面的 JavaScript 库 特色 声明式: React 使创建交互式 UI 变得轻而易举.为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更 ...

  4. python学习:python的常用功能示例2

    1. python 写入txt with open("douban.txt","w") as f: f.write("这是个测试!") fi ...

  5. mysql:服务无法启动解决

    输入mysqld --console,查看报错 Found option without preceding group in config file E:\mysql-5.7.21-winx64\m ...

  6. charles 查找

    本文参考:charles 查找 查找设置 界面如上图,也没啥好说的: 这个还是非常常用的:需要了解 界面如上图,也没啥好说的: 这个还是非常常用的:需要了解 查找需要了解的关键字是: 查找的内容 正则 ...

  7. 如何提高程序员的键盘使用效率?——ASE第一次作业

    引言 对于程序员来说,键盘输入是我们工作的基本方式,当你的手指在键盘上飞起来的时候,不但能够提高工作效率,还常常引来旁人羡慕的目光.下面将从不同方面介绍一些提高键盘使用效率的方法. 程序员最主要的文字 ...

  8. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  9. linux 环境下jmeter+ant+jenkins

    一.linux下的jenkins的安装: 下载链接:https://pan.baidu.com/s/1qZItZOC 密码:58da Jenkins 下载网址: http://jenkins-ci.o ...

  10. 深入理解 Css3 的 clip-path

    clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域.区域内的部分显示,区域外的隐藏.clip-path属性代替了现在已经弃用的剪切 clip属性.clip-path的属性 ...