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. springboot之多模块化项目打包

    1.目录结构 2.打成war包,只需在web子项目中的pom文件中添加 <packaging>war</packaging> <build> <!-- 为ja ...

  2. 阶段5 3.微服务项目【学成在线】_day18 用户授权_05-方法授权-方法授权测试

    这是我们课程的服务里面 加了授权的方法 重启课程管理的服务 首先需要登陆 在redis复制token 访问课程列表 用最新复制的令牌 最新token可以 调用teachplan方法 调用 一个没加注解 ...

  3. Qt编写输入法V2019终极版

    一.前言 之前写过的V2018版本的输入法,本来已经很完善了,不打算更新升级了,最近有个朋友找我定制一个输入法,需要高仿一个苹果MAC电脑的输入法,MAC操作系统的审美无疑是相当棒的,于是乎直接拿以前 ...

  4. LeetCode_100. Same Tree

    100. Same Tree Easy Given two binary trees, write a function to check if they are the same or not. T ...

  5. 浏览器打印出一段unicode码,汉字无法正常显示

    处理办法:http://tool.chinaz.com/tools/unicode.aspx:unicode转中文就可以啦

  6. Release报错Debug无错

    代码在Release模式下会crash,Debug模式下可以运行,最后定位到原因 for (size_t j = 0; j < ids.size()-1; ++j) { } 发现问题是Relea ...

  7. 一种可以避免数据迁移的分库分表scale-out扩容模式

    转自: http://jm.taobao.org/ 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星 ...

  8. react Link标签 火狐失效怎么解决

    这个问题其实找了好多资料都没有具体的解决方法: 今天突然想到可能是层级嵌套出问题了,刚好有个bug也是关于这个的,已经亲测解决了 代码如下:火狐和谷歌都能正常的跳转 <Link to=" ...

  9. 49.Django起步学习

    django起步 django安装 pip install django==2.0.4(版本号) pip install django 默认安装最新版本 创建项目 django-admin start ...

  10. CentOS7使用yum和源码升级内核

    原文:https://blog.csdn.net/bayin4937/article/details/100949870 两种方式升级内核 一.yum升级内核 参考:https://blog.csdn ...