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. PorterDuffXfermode之Mode.SRC_IN

    package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...

  2. [Scikit-learn] 1.1 Generalized Linear Models - from Linear Regression to L1&L2

    Introduction 一.Scikit-learning 广义线性模型 From: http://sklearn.lzjqsdd.com/modules/linear_model.html#ord ...

  3. 【406】C语言相关函数

    <stdlib.h>(1) <stdlib.h>(2) malloc() 用来动态地分配内存空间,分配成功返回指向该内存的地址,失败则返回 NULL. 前面的 (int*) 或 ...

  4. 123457123456#0#-----com.twoapp.HuaXueGame01--前拼后广--儿童滑雪大冒险游戏jiemei

    com.twoapp.HuaXueGame01--前拼后广--儿童滑雪大冒险游戏jiemei

  5. Java遍历日期代码

    import java.util.ArrayList; import java.util.List; public class DateTraveller { public static List&l ...

  6. 红绿灯 promise和原始方式实现

    Promise 方式 async+await function sleep(duration){ return new Promise(function(resolve){ setTimeout(re ...

  7. Moq中判断方法是否被执行时,参数中有列表的情况

    如果参数中有列表,列表项为引用类型时,则会判断列表项是否为同一引用 列表本身不判断

  8. HTML让字体闪动和滚动显示

    存粹的HTML让字体闪动显示: <html> <head> <title>TEST</title> <style type="text/ ...

  9. 20175316盛茂淞 2018-2019-2 《Java程序设计》第11周学习总结

    20175316 <Java程序设计> 第11周学习总结 教材内容学习总结 第十三章 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用UR ...

  10. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验三《敏捷开发与XP实践》 实验报告

    实验内容与要求 1.XP基础 极限编程(Extreme Programming,XP)是一种全新而快捷的软件开发方法.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: XP是 ...