EventLoop 即事件循环机制,是指浏览器或 Node 的一种解决 JavaScript 单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。
如果看官是个新手的话,看到上面的输出结果,肯定一脸懵逼的,但是没关系,看完这篇文章您就懂了。想完全明白上面这道题目,还需要了解JS的两个概念,没错,就是宏任务和微任务。
这个就涉及到JavaScript事件轮询中的宏任务和微任务。那么,你能说清楚到底宏任务和微任务是什么?是谁发起的?为什么微任务的执行要先于宏任务呢?
众所周知,JS 是一门单线程语言,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?
对于promise、async和await的执行顺序,很多人都容易弄混,也有很多人只愿意在程序中运用一种,比如我只使用promise,不使用async和await;也有只用async和await,而不是用promise。所以现在来为大家讲讲一起共存需要注意写什么?
我们先不着急明白事件循环是什么。先从它的起源入手。大家都知道JavaScript是同步的,也就是单线程,原因是因为如果不使用单线程,在操作DOM时可能会出现一些问题,比如我们有两个事件,一个是删除div,一个是添加div,他们的执行顺序不同,导致的结果也将截然不同。比如当前有div1和div2,如果先执行删除后添加,那么得到的就是div1和div2,但是如果是先执行添加后删除,那么得到的还是div1和div2。为了避免这种逻辑上的混乱,因此规定JavaScript是单线程的。
之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章。观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同步还有,setTimeout,Promise,async这些内容了然于胸,接下来让我们走入正题:
这道题主要考察的是事件循环中函数执行顺序的问题,其中包括async ,await,setTimeout,Promise函数。下面来说一下本题中涉及到的知识点。
本篇博文是学习的掘金的一篇博文:【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理),经过自己一个个问题的学习,整理如下: 一.Promise的几道基础题 题目一 ✨ const promise1 = new Promise((resolve,reject)=>{ console.log('promise1') }) console.log('1',promise1) // promise1 // 1 Promise {<pending>} 先执行构造函数中的代码pro
细心的朋友肯定会发现前面第 6 步,如果async2函数是没有async关键词修饰的一个普通函数呢?
实际上,谈到任务队列,绝大多数人第一反应就是 同步任务/异步任务、宏任务/微任务,在很多博客和帖子中也有详细的说明。在看了 winter 老师在极客时间《重学前端》这门课,发现自己对 Event Loop 了解的不够深入,是从一道题目开始:
js是单线程,js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。那么问题来了,假如我们想浏览新闻,但是新闻包含的超清图片加载很慢,难道我们的网页要一直卡着直到图片完全显示出来?因此聪明的程序员将任务分为两类:1)同步任务 2)异步任务
「事件循环」 的概念非常简单。它是一个在JavaScript 引擎等待任务,执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。
在JS运行机制当中,JavaScript是单线程的编程语言,简单的讲就是将JavaScript比作一个单项的管道,每次仅仅执行一个任务,执行多种任务需要进行排队执行。只有执行完前一个任务,才能执行后一个任务。
当我们执行 JS 代码的时候其实就是往执行栈中放入函数,那么遇到异步代码的时候该怎么办?其实当遇到异步的代码时,会被挂起并在需要执行的时候加入到 Task(有多种 Task) 队列中。一旦执行栈为空,Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行,所以本质上来说 JS 中的异步还是同步行为。
JavaScript 有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。事件循环包含一个函数执行栈、一个宏任务队列、一个微任务队列。在说事件循环之前,需要说几个名词定义。
最近面试了很多家公司,这道题几乎是必被问到的一道题。之前总觉得自己了解得差不多,但是当第一次被问到的时候,却不知道该从哪里开始说起,涉及到的知识点很多。于是花时间整理了一下。并不仅仅是因为面试遇到了,而是理解JavaScript事件循环机制会让我们平常遇到的疑惑也得到解答。
JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程,我们称为事件循环过程。一个线程中,事件循环是唯一的,但是任务队列可以拥有多个。任务队列又分为macro-task(宏任务)与micro-task(微任务),在最新标准中,它们被分别称为task与jobs。
•1 <= deck.length <= 10000•0 <= deck[i] < 10000
面试题如下,大家可以先试着写一下输出结果,看与正确答案是否有出入,如果大家不能准确的做出答案,可以通过下面对微任务,事件循环,定时器等相关代码执行顺序的讲解,让大家焕然一新。
面试题如下,大家可以先试着写一下输出结果,然后再看我下面的详细讲解,看看会不会有什么出入,如果把整个顺序弄清楚 Node.js 的执行顺序应该就没问题了。
async是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。
首先我们考虑一下,如果我们是浏览器或者 Node 的开发者,我们该如何使用 JavaScript 引擎。
以上便是ES7系列新增加的关于对Promise的一种新的写法和处理方式,能够在 Promise then链解决回调地狱的基础之上,再简化结果。
返回值为undefined。不是说在async中返回一个值,这个值就是Promise中reslove的值吗?但后来检查才发现——上面函数中的return是在回调函数的代码块中,只有直接在async函数中return才可以被reslove传递。
这个题目主要是考察对同步任务、异步任务:setTimeout、promise、async/await的执行顺序的理解程度。(建议大家也自己先做一下o)
async function async1() { console.log("async1 start"); //2 await async2(); console.log("async1 end"); // 6 } async function async2() { console.log("async2"); // 3 } console.log("script start"); // 1 setTimeout(function () { console.log(
JavaScript是单线程语法,没有语言内置的休眠(sleep or wait)函数,所谓的sleep只是实现一种延迟执行的效果,无论是使用ES5,Promise,generator或者async await实现sleep,核心只是应用到了setTimeout方法。
不同于传统的回调, then 关联的函数,会在异步操作完成后执行;如果有多个 then,那么也会依次调用,除非其中有调用 reject 跳转到 catch 。
什么是async、await await 用于等待异步完成 通常async、await都是跟随Promise一起使用的
async await 底层并不是新东西,只是用起来比Generator函数更舒服的api...
下面题目主要和Promise以及JS的事件循环有关,题目均为代码输出问题(面试题从文章第二部分开始)。
为什么说Async function是从Promise,Generator一路走来的?
许多编程语言都有一个 sleep 函数,可以延迟程序的执行若干秒。JavaScript缺少这个内置功能,但不用担心。在这篇文章中,我们将探讨在JavaScript代码中实现延迟的各种技巧,同时考虑到该语言的异步性质。
埋点统计在我们业务里经常有遇到,或者很普遍的,我们自己网站也会加入第三方统计,我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作,我们很少考虑到为什么这么做,直接同步加载不行吗?统计代码会影响业务首屏加载吗?同步引入方式,当然会,我的业务代码还没加载,首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下,首屏优化,你可以在埋点统计上做些优化,那么页面加载会有一个很大的提升,本文是一篇笔者关于埋点优化的笔记,希望看完在项目中有所思考和帮助。
在我的认知中,async/await会等待await返回,那么必然就是同步的,既然是同步的,那么就是会阻塞事件循环。
在JavaScript中执行异步代码是很常见的。当你有以异步方式运行的代码时,Jest 需要知道当前它测试的代码是否已完成,然后它可以转移到另一个测试。
很多编程语言里都有sleep(),delay()等方法,它能让我们的程序不那么着急的去执行下一步操作,而是延迟、等待一段时间。软件开发中经常会遇到需要这样的函数,比如等待几分钟去检查某一事件是否发生。JavaScript里有setTimeout()方法来实现设定一段时间后执行某个任务,但写法很丑陋,需要提供回调函数: setTimeout(function(){ alert("Hello"); }, 3000); JavaScript Promise API是新出现了一个API,借助 Promise,我们可
async/await 最大的为题在于 await 很容易被滥用,我们多数情况下是系统代码异步执行使得代码更高效。
这篇文章是一篇比较纯的Promise笔试文章,是我自己在做题的时候,根据题目想要的考点来反敲知识点,然后再由这个知识点编写从浅到深的的题目。
领取专属 10元无门槛券
手把手带您无忧上云