文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Promise、setTimeout的执行顺序

什么是event loop event loop是js的事件执行机制，我们一般简称为事件循环（之所以称作事件循环，是因为它经常被用于类似如下的方式来实现） while (queue.waitForMessage...同步和异步任务 ​ 要了解异步线程我们首先应该明白它的用处，因为js的单线程特性，任务的执行顺序都是依次执行，而当我们在工作中遇到网络请求，前后端交互的时候，你的数据不会马上拿到，这需要时间，如果等拿到数据再执行下面的代码...异步任务分为微任务和宏任务 ​ 在执行过程中，我们知道了同步任务会优先异步任务执行，那么在异步中呢，异步中同样包含微任务和宏任务，首先我们大概了解下微任务和宏任务，在js中： 微任务(micor Task...1.3.4.2 ，我们首先找到同步任务，1 3 是同步任务，然后执行异步任务，异步任务如果按顺序执行则是24 但是答案是4.2那么我们可以知道 promise的执行顺序优先于setTimeout所以由此可知...红线就是任务的执行顺序 黑线是任务的结构 看完这么多下面来完成下面这道题并加以分析： console.log(1) setTimeout(() => { console.log(2) new

67720
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    多层嵌套 promise then 执行顺序

    在看 js 事件循环的时候，看到一个有趣的 promise then 执行顺序的题，想了好久，终于想明白了，这里记录一下。 大家先想下这里的执行顺序是什么。...333 为什么先比 444 和 555 执行了，这里首先要明确一点  promise then函数回调执行完毕后才会开始下一个 then 函数，当多个 then 链式调用的时候，如果一个 then 函数放入微任务队列...首先，大家都知道 setTimeout 是宏任务，则一定在下一轮事件循环的时候才执行，则他的执行优先级最低，promise是同步任务，会先执行，promise.then() 是微任务，当遇到微任务的时候...执行到 22 行逻辑： 这里当执行到 22 行时， then的参数整体作为一个函数放入微任务队列中，因为这里还没执行，所以 555 的 then 就暂时不执行，继续下一个 333 的 then 放入微任务队列...，接下来没有同步任务了，开始执行微任务队列，当执行到 23 行的时候，这个微任务先执行 promise 同步函数，将then 444 又放入了 微任务队列，接下来没有课执行的同步任务了，则开始执行微任务队列

    1.7K40

    Js篇-面试题2-Promise 执行顺序问题

    Promise 执行问题 写出下面一段程序的输出的结果 new Promise(resolve => { console.log(1); setTimeout(() => console.log...(2),0) Promise.resolve().then(() => console.log(3)) resolve(); }).then(() => console.log(4))...console.log(5) 答案: 1 5 3 4 2 解析:事件循环,任务队列的执行顺序,new Promise是会立即调用,接收了一个resolve参数,执行调用输出console.log(1)...语句,遇到setTimeout,它是一个异步宏任务,会推送到任务队列中,进入挂起状态 而promise.resove也是一个异步微任务,仍然会推送到任务队列中,进入挂起状态,当主线程console.log...(5)执行完后,在从异步任务队列中进行执行,在同一栈中,微任务要优先于宏任务的执行,所以先执行 3,然后 4,最后是 2 最终执行的顺序结果是:1,5,3,4,2

    1.4K10

    JS执行顺序

    javascript给人的直观感受是，从上往下执行，但实际上却不是这样的，先看个例子 1. console.log(test); 2. var test = "你好"; 3. console.log(...因为javascript执行时，在同一个作用域内是先编译再执行 编译的时候会编译 function 和 var 这两个关键词定义的变量，编译完成后从上往下执行并向变量赋值 所以执行第1行时, var test...已经执行过了，所以test不会报错，而test2就会报错 需要注意的是，对 var test 执行编译时，只是先定义了 test 这个变量，并不会把 "你好" 这个值赋给test，而是到第2行时才给test...赋值的，这就是为什么第1行的执行结果是 undefined 对于上面的例子，可以这样理解 //先编译 var 定义的变量 1. var test; //编译完成后，从上到下执行代码 2. console.log...//执行结果是"你好" function test() { console.log("你好"); } 模拟编译执行过程 //找到 function 定义的部分进行编译 //以函数名作为变量名，同时用函数赋值

    9.2K60

    settimeout(fn 0)与Promise的执行顺序

    而settimeout(fn, 0)表示立即执行，也就是用来改变任务的执行顺序，要求浏览器”尽可能快“的进行回调。 2. promise何时执行？...新建后立即执行，也就是说，Promise构造函数里的代码是同步执行的。...接着， 会先执行 macrotask 中的第一个任务（整个 script中的同步代码 ），再加上promise 构造函数也是同步的（promise.then 回调被推进到 microtask 队列中），...所以会先打印出2 10 3，然后继续执行末尾的，打印出5 此时，已经执行完了第一个 macrotask , 所以接下来会顺序执行所有的 microtask, 也就是 promise.then 的回调函数...经过层层测试，所以最终得出的结论是： 同步代码(包括promise的构造函数) -> promise.then -> setTimeout 如有错误或疑问，欢迎在下方评论区留言!

    1.4K30

    关于JS执行顺序

    背景 众所周知，JS是单线程语言，但它支持异步操作，其核心机制就是JS引擎的事件循环。...原理 总的来说，流程图如下： Promise中的代码块是立即执行的。...更复杂一点 不管我的Promise怎么组合，怎么套，由于setTimeout设置的是宏任务，所以它始终在这些微任务都执行完成之后才会运行： setTimeout(() => { console.log...所以它们按顺序排列; 2是宏任务，会放到下一次事件循环时执行; 4是微任务，在首次运行时就把它添加到了微任务队列中，所以在下一次事件循环之前就会被执行。...通过这样的事件循环，使得单线程的JS也可以拥有异步的能力，使得如AJAX请求这样费时间的操作可以被安排到后面来执行，不影响页面的加载和渲染。

    5.6K30

    promise执行顺序面试题令我头秃

    ，并将异步操作的结果，作为参数传递出去；reject 函数将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误...Promise，按题目的要求我们只要顺序执行这三个函数就好了，然后把结果放到 data 中，但是这些函数里都是异步操作，想要按顺序执行，然后输出 1，2，3并没有那么简单，看个例子。...A，B 但是输出的结果却是 b，a 对于这些异步函数来说，并不会按顺序执行完一个，再执行后一个。...的关系不太大，主要是需要理解 JS执行机制，才能很好的解决这道题，对于 JS 执行机制不了解的朋友推荐看看这篇文章这一次，彻底弄懂 JavaScript 执行机制第一轮事件循环先执行宏任务，主script...return index }); }); // 利用数组的 reduce 方法来以队列的形式执行 return sequence.reduce((last, url,

    54320

    JS如何控制任务的执行顺序

    Eat supper~ 从这里不难看出，这里主要的点是链式调用和流程控制 链式调用很简单，核心的点就是函数执行完后 返回 this，栗子： class EatMan { eat(food) {...eat ${food} ~`); return this; } } new EatMan().eat('apple').eat('pear') 这样就实现链式调用了，下面上主菜 - 控制任务的执行顺序...这里参考某些中间件的实现思路，首先创建一个任务队列，把每个函数放进去，按顺序执行，每个函数执行完成后调用一个 next 函数，执行下一个函数 class EatMan { constructor(...name) { this.name = name; this.tasks = []; this.init(); // 利用 setTimeout 的机制 在下一个事件循环才开始执行...Eat dinner~ Eat supper~ 首发自：JS如何控制任务的执行顺序 - 小鑫の随笔

    3.6K30

    ajax 和 js 事件的执行顺序

    有一个需求，滚轮滚动到相应位置的时候执行当前的动画，这个动画在footer里面，而网页的主体通过ajax进行渲染，我在js里面调用ajax渲染数据，然后再获取主体的高度，滚动到该高度的时候执行动画。...放在服务器上测试发现无论怎么写，都是先获取主体的高度，然后才进行数据的渲染。那么必然高度是一个极小的值，不符合我想要的属性。...我大致想了两种解决办法，均以失败告终，本地是ajax先执行，服务器是js先执行。...最后我想到了，ajax不就是一种异步方法，我将其改为同步不就行，先让ajax执行完在执行js事件。...当然这样做有弊端的，如果接口出问题，ajax渲染失败，那么整个网页的js都将执行不了。不过我想真到了数据都渲染不出的地方，访问网页就没有意义了，所以最后我采用了这种方法。

    2.9K30

    【微信小程序】---- Promise.then(success, fail)执行顺序的问题

    出错代码 获取设置默认地址的id； 获取用户的token和分配调用api的key值； 使用axios将当前地址id的地址设置为默认地址； 设置成功后刷新地址列表； 注意：由于在地址列表中使用了当前页面栈...错误 设置默认会出现有时候地址列表更新回来是原来地址列表，感觉设置没成功； 页面不动，单独再次调用地址列表接口，发现设置默认地址是设置成功了的； 打印接口调用的开始时间，发现设置默认地址和获取地址列表同时调用了...错误分析 设置默认地址成功，获取地址列表成功； 设置默认地址和获取地址列表同时执行； 按照第2步中，需要的是设置默认成功后执行获取地址列表； 通过分析，在执行成功函数，获取地址列表出现错误！...； call是绑定this并执行；bind是绑定this返回函数，不执行！...Promise.then这里应该传入的是地址列表这个函数，在成功后执行这个函数，而不是执行结果！ 6. 总结 设置成功后的回调，执行的是函数！函数！函数！； 传给成功函数的是函数！函数！函数！！

    1.4K20

    【JS】1170- 5 个使用 Promise 时的常见错误

    Promise 提供了一种优雅的方法来处理 js 中的异步操作。这也是避免“回调地狱”的解决方案。然而，并没有多少开发人员了解其中的内容。因此，许多人在实践中往往会犯错误。...在本文中，介绍一下使用 promise 时的五个常见错误，希望大家能够避免这些错误。 1、避免 Promise 回调地狱 通常，Promise是用来避免回调地狱。...但是，Promise本身会在其作用域内捕捉所有的错误（甚至是打字错误），而不需要 try/catch块。它确保在执行过程中抛出的所有异常都被获取并转换为被拒绝的 Promise。...块之外，以保持其同步性。...后立即执行 Promise 块 至于下面的代码片断，如果我们把代码片断放在调用HTTP请求的地方，它就会被立即执行。

    99620

    Promise的错误处理

    题图 By Clm 在开发过程中我们经常使用Promise来处理异步，但是我们经常忽略Promise的错误处理。 今天带着大家来一起来梳理一下Promise处理错误的几种情况。...第二种情况，处理Promise调用链中的错误，如果有一个较长的Promise调用链，其中某个环节抛出错误，错误会被后续链中最近的一个catch所捕获，代码如下： Promise.resolve(1)...这个结果会按照正常的错误机制被捕获，如果做了处理错误处理，其执行路径会发生偏差，这主要是看代码的需求，看代码： const tasks = [ Promise.reject("出错了哦"),...(err => { console.log("执行的是catch") console.log(err) }) 执行结果如图： 我们看到错误被Promise链最后的...catch(err => { console.log("执行的是catch") console.log(err) }) 执行结果： 看结果，执行的是then，说明错误在第一个

    2.2K30

    promise执行顺序面试题令我头秃，你能作对几道

    ，并将异步操作的结果，作为参数传递出去；reject 函数将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误...Promise，按题目的要求我们只要顺序执行这三个函数就好了，然后把结果放到 data 中，但是这些函数里都是异步操作，想要按顺序执行，然后输出 1，2，3并没有那么简单，看个例子。...A，B 但是输出的结果却是 b，a 对于这些异步函数来说，并不会按顺序执行完一个，再执行后一个。...的关系不太大，主要是需要理解 JS执行机制，才能很好的解决这道题，对于 JS 执行机制不了解的朋友推荐看看这篇文章这一次，彻底弄懂 JavaScript 执行机制第一轮事件循环先执行宏任务，主script...return index }); }); // 利用数组的 reduce 方法来以队列的形式执行 return sequence.reduce((last, url,

    44820
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券