前端知识总结--js异步事件顺序
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异步事件顺序的更多相关文章
- JS异步事件顺序:setTimeout,async,promise
为什么最近更新那么频繁,还不是因为笔试的时候瞎了? 先说异步事件执行顺序的规则: 1. 定时器异步队列和promise队列不是同一队列,promise优先级高于setTimeout; 2. 创建pro ...
- js 异步执行顺序
参考文章: js 异步执行顺序 1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...
- 【前端知识体系-JS相关】深入理解JavaScript异步和单线程
1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...
- 【前端知识体系-JS相关】JS基础知识总结
1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...
- 【前端知识体系-JS相关】组件化和React
1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...
- 【前端知识体系-JS相关】JS-Web-API总结
2.1 DOM操作 2.1.1 DOM的本质是什么? <!-- DOM树:二叉树 --> /* <?xml version="1.0" encoding=&quo ...
- 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?
1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...
- 【前端知识体系-JS相关】ES6专题系列总结
1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
随机推荐
- springboot之多模块化项目打包
1.目录结构 2.打成war包,只需在web子项目中的pom文件中添加 <packaging>war</packaging> <build> <!-- 为ja ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_05-方法授权-方法授权测试
这是我们课程的服务里面 加了授权的方法 重启课程管理的服务 首先需要登陆 在redis复制token 访问课程列表 用最新复制的令牌 最新token可以 调用teachplan方法 调用 一个没加注解 ...
- Qt编写输入法V2019终极版
一.前言 之前写过的V2018版本的输入法,本来已经很完善了,不打算更新升级了,最近有个朋友找我定制一个输入法,需要高仿一个苹果MAC电脑的输入法,MAC操作系统的审美无疑是相当棒的,于是乎直接拿以前 ...
- 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 ...
- 浏览器打印出一段unicode码,汉字无法正常显示
处理办法:http://tool.chinaz.com/tools/unicode.aspx:unicode转中文就可以啦
- Release报错Debug无错
代码在Release模式下会crash,Debug模式下可以运行,最后定位到原因 for (size_t j = 0; j < ids.size()-1; ++j) { } 发现问题是Relea ...
- 一种可以避免数据迁移的分库分表scale-out扩容模式
转自: http://jm.taobao.org/ 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星 ...
- react Link标签 火狐失效怎么解决
这个问题其实找了好多资料都没有具体的解决方法: 今天突然想到可能是层级嵌套出问题了,刚好有个bug也是关于这个的,已经亲测解决了 代码如下:火狐和谷歌都能正常的跳转 <Link to=" ...
- 49.Django起步学习
django起步 django安装 pip install django==2.0.4(版本号) pip install django 默认安装最新版本 创建项目 django-admin start ...
- CentOS7使用yum和源码升级内核
原文:https://blog.csdn.net/bayin4937/article/details/100949870 两种方式升级内核 一.yum升级内核 参考:https://blog.csdn ...