首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

多图生动详解浏览器与Node环境下Event Loop

先给出一个知识点,JS中有些代码是异步执行,所谓异步,就是不会阻塞代码运行,而会另外开启一个空间去执行这段异步代码,其余同步代码就仍正常执行,若异步代码中有其它代码,则会在之后某个时刻将异步代码中其它代码执行...multiply(n, n) } function print(n) { let res = calculate(n) console.log(res) } print(5) 当这段代码浏览器中运行时...事件循环中涉及到了4个宏队列和2个微队列,如图所示 了解了基本过程以后,我们先来写一道简单setTimeout(() => { console.log(1); }, 0) setImmediate...假设node开启事件循环需要2毫秒,然后 setTimeout 实际运行延迟时间是10毫秒,即事件循环开始得比 setTimeout 早,那么第一轮事件循环运行到 timers 时,发现并没有 setTimeout...阶段是为了处理各种 I/O 事件,例如文件读取就属于 I/O 事件,所以我们可以把 setTimeout 和 setImmediate 代码放在一个文件读取操作回调,这样第一轮循环到达 poll

63920

那就来了解一下JavaScript分别在浏览器和Node环境下运行机制吧

先给出一个知识点,JS中有些代码是异步执行,所谓异步,就是不会阻塞代码运行,而会另外开启一个空间去执行这段异步代码,其余同步代码就仍正常执行,若异步代码中有其它代码,则会在之后某个时刻将异步代码中其它代码执行...multiply(n, n) } function print(n) { let res = calculate(n) console.log(res) } print(5) 当这段代码浏览器中运行时...对于11.x 之后版本,虽然官网我还没找到相关文字说明是这样,但通过无数次运行,暂且可以说是这样,若各位找到相关说明,可以留下评论) 同理,Node.js也有宏任务和微任务之分,我们来看一下常用都有哪些...假设node开启事件循环需要2毫秒,然后 setTimeout 实际运行延迟时间是10毫秒,即事件循环开始得比 setTimeout 早,那么第一轮事件循环运行到 timers 时,发现并没有 setTimeout...阶段是为了处理各种 I/O 事件,例如文件读取就属于 I/O 事件,所以我们可以把 setTimeout 和 setImmediate 代码放在一个文件读取操作回调,这样第一轮循环到达 poll

70500

高阶函数和闭包

当函数执行完毕,本作用域局部变量会销毁。 2.2什么是闭包 闭包(closure)指有权访问另一个函数作用域中变量函数。简单理解就是 ,一个作用域可以访问另外一个函数内部局部变量。...= function() {      console.log(i);   } })(i); } 闭包应用-循环setTimeout() 3秒钟之后,打印所有li元素内容 for...(var i = 0; i < lis.length; i++) {   (function(i) {     setTimeout(function() {     console.log(lis...[i].innerHTML);     }, 3000)   })(i); } 闭包应用-计算打车价格 /*需求分析 打车起步价13(3公里), 之后每多一公里增加 5块钱....total = start + (n - 3) * 5         }         return total;       },       // 拥堵之后费用       yd:

61720

2023秋招前端面试必会面试题_2023-02-28

而Composition API是基于Vue响应式系统实现,与React Hook相比 声明setup函数,一次组件实例化只调用一次setup,而React Hook每次重渲染都需要调用Hook...(err)); 输出结果如下: 0 Error: 0 1 2 3 可以看到catch捕获到第一个错误之后,后面的代码还不执行,不过不会再被捕获了。...第一轮事件循环正式结束,这一轮结果是输出1,7,6,8。 (2)第二轮时间循环从**setTimeout1**宏任务开始: 首先输出2。...第二轮事件循环结束,第二轮输出2,4,3,5。 (3)第三轮事件循环开始,此时只剩setTimeout2了,执行。 直接输出9。...也就是说,函数fun中参数 n 值是0,而返回那个对象中,需要一个参数n,而这个对象作用域中没有n,它就继续沿着作用域向上一级作用域中寻找n,最后函数fun中找到了nn值是0。

80520

JavaScript 事件循环:从起源到浏览器再到 Node.js

仔细思考一下就会发现,JavaScript 所谓事件和触发本质上都通过浏览器中转,更像是浏览器行为而不仅仅是 JavaScript 语言一个队列。...setImmediate 引入是为了解决 setTimeout 精度问题,由于 setTimeout 指定延迟时间是毫秒(ms)但实际一次时间循环时间可能是纳秒级,所以一次事件循环多个外部队列中...接下来,我们再来看一下当 Node.js 与浏览器端对齐了事件循环事件之后,这个例子执行结果为: setImmediate1 promise3 setImmediate2 promise4 setTimeout1...promise1 setTimeout2 promise2 其中主要有两点需要关注,一是外部列队每次事件循环只执行了一个,另一个是 Node.js 固定了多个外部队列优先级。...所以当前外部队列执行一定数量 callback 之后会截断。

1.1K30

经典面试题解析

那么反过来想一想,假如我们定义了函数之后即刻对其进行了调用,是否此时将会在环境中寻找 i 值并马上替换掉 console.log(i) 中 i 呢?...setTimeout是异步任务,并不在主线程上,而是宏任务队列里,它必须等待主线程执行栈清空,才有自己“一席之地”,才能去执行,所以这里我们直接忽略setTimeout,将前三次循环setTimeout...之后循环跑完了,主线程同步任务结束。此时i变成了3。 轮到任务队列了——> 我们回过头调用setTimeout回调函数,进行i输出。...2.利用自执行函数 让函数定义之后就即刻执行,那么函数中 i 就会指向当前循环 i,这个 i 值为多少在那时就已经确定了,而不再是随着跑循环而动态变化。...这里要理解循环做了什么:每一次循环,实际上执行setTimeout() 方法,执行完之后把每次回调函数挂载队列里,后续等主任务清空之后,再一一执行。

60240

你不知道Javascript:有趣setTimeout

从结果来看,for循环执行完跳出之后,才开始执行setTimeout(所以j才等于10),为什么不是每次迭代都执行一次setTimeout呢?...为什么会循环打印十个10 许多人习惯用第二个问题中执行结果来回答这个问题:for循环执行完跳出之后,才开始执行setTimeout,所以才打印了十个10。...为什么不是每次迭代都执行一次setTimeout 大家都知道,JavaScriptES6出现以前,是没有块状作用域,这就意味着, for循环中用var定义变量j,其实是属于全局,即在全局范围都可以被访问到...,既然如此,那其实整个全局作用域中就只有一个j,每次for循环都是更新这个j。...setTimeout定时,是定时插入执行栈之后立即执行,还是立即插入执行栈定时执行? 期待大家留言。

81740

2023-07-11:给定正整数 n, 返回 范围具有 至少 1 位 重复数字正整数个数。 输入:n =

2023-07-11:给定正整数 n, 返回 [1, n] 范围具有 至少 1 位 重复数字正整数个数。 输入:n = 100。 输出:10。...答案2023-07-11: 函数主要思路如下: 1.若n小于等于10,则直接返回0,因为[1, 10]范围不存在重复数字情况。 2.计算n位数和偏移量。...4.3.3.若first0到9之间,则如果status第first位为1,说明该数字可用,将offset/10和status第first位取反异或,并调用递归函数process计算剩余位和可用状态下数字个数...5.最后结果为n加1减去noRepeat,即在[1, n]范围内至少有1位重复数字正整数个数。...该代码在给定正整数n范围采用了一种比较高效算法,通过一系列位运算和迭代计算,找出了每个位数下非重复数字个数,然后根据n位数和偏移量来计算在该位数下包含至少1位重复数字正整数个数,并将它们相加得出最终结果

20720

你不知道Javascript:有趣setTimeout

今天回顾JavaScript进阶用法时候,发现一个有趣问题,话不多说,先上代码: for(var j=0;j<10;j++){ setTimeout(function(){console.log...从结果来看,for循环执行完跳出之后,才开始执行setTimeout(所以j才等于10),为什么不是每次迭代都执行一次setTimeout呢?...为什么会循环打印十个10 许多人习惯用第二个问题中执行结果来回答这个问题:“for循环执行完跳出之后,才开始执行setTimeout,所以才打印了十个10”。...为什么不是每次迭代都执行一次setTimeout 大家都知道,JavaScriptES6出现以前,是没有块状作用域,这就意味着, for循环中用var定义变量j,其实是属于全局,即在全局范围都可以被访问到...setTimeout定时,是定时插入执行栈之后立即执行,还是立即插入执行栈定时执行? 期待大家留言。

715100

nodejs事件和事件循环简介

所谓事件循环,就是指处理器一个程序周期中,处理完这个周期事件之后,会进入下一个事件周期,处理下一个事件周期事情,这样一个周期一个周期循环。...事件循环阻塞 如果我们事件处理过程中,某个事件处理发生了阻塞,则会影响其他事件执行,所以我们可以看到JS中,几乎所有的IO都是非阻塞。...事件循环举例 我们看一个简单事件循环例子: const action2 = () => console.log('action2') const action3 = () => console.log...setImmediate() 和 setTimeout(() => {}, 0)功能基本上是类似的。它们都会在事件循环下一个迭代中运行。...我们可以考虑回调函数内部再次调用setTimeout,这样形成递归setTimeout调用: const myFunction = () => { console.log('做完后,隔2s再次执行

78641

nodejs事件和事件循环简介

所谓事件循环,就是指处理器一个程序周期中,处理完这个周期事件之后,会进入下一个事件周期,处理下一个事件周期事情,这样一个周期一个周期循环。...事件循环阻塞 如果我们事件处理过程中,某个事件处理发生了阻塞,则会影响其他事件执行,所以我们可以看到JS中,几乎所有的IO都是非阻塞。...事件循环举例 我们看一个简单事件循环例子: const action2 = () => console.log('action2') const action3 = () => console.log...setImmediate() 和 setTimeout(() => {}, 0)功能基本上是类似的。它们都会在事件循环下一个迭代中运行。...我们可以考虑回调函数内部再次调用setTimeout,这样形成递归setTimeout调用: const myFunction = () => { console.log('做完后,隔2s再次执行

82940

nodejs事件和事件循环简介

所谓事件循环,就是指处理器一个程序周期中,处理完这个周期事件之后,会进入下一个事件周期,处理下一个事件周期事情,这样一个周期一个周期循环。...事件循环阻塞 如果我们事件处理过程中,某个事件处理发生了阻塞,则会影响其他事件执行,所以我们可以看到JS中,几乎所有的IO都是非阻塞。...事件循环举例 我们看一个简单事件循环例子: const action2 = () => console.log('action2') const action3 = () => console.log...setImmediate() 和 setTimeout(() => {}, 0)功能基本上是类似的。它们都会在事件循环下一个迭代中运行。...我们可以考虑回调函数内部再次调用setTimeout,这样形成递归setTimeout调用: const myFunction = () => { console.log('做完后,隔2s再次执行

99450

JS 事件循环

浏览器执行线程 解释事件循环之前首先先解释一下浏览器执行线程: 浏览器是多进程,浏览器每一个 tab 标签都代表一个独立进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中一种,主要负责页面渲染...工作线程:也称幕后线程,这个线程可能存在于浏览器或js引擎,与主线程是分开,处理文件读取、网络请求等异步事件。...主线程任务执行完毕为空,会去任务队列读取对应任务,推入主线程执行。 上述过程不断重复就是我们说 Event Loop (事件循环)。...事件循环中,每进行一次循环操作称为tick,通过阅读规范可知,每一次 tick 任务处理模型是比较复杂,其关键步骤可以总结如下: 在此次 tick 中选择最先进入队列任务( oldest task...举例 掌握概念之后,我们来做一个例子强化一下: console.log('script start'); setTimeout(function() { console.log('setTimeout

15.4K10

Vue为何采用异步渲染

描述 对于Vue为何采用异步渲染,简单来说就是为了提升性能,因为不采用异步更新,每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue会在本轮数据更新后,再去异步更新视图,举个例子,让我们一个方法重复更新一个值...而为了达到这个目的,我们需要将渲染操作推迟到所有的状态都修改完成,为了做到这一点只需要将渲染操作推迟到本轮事件循环最后或者下一轮事件循环,也就是说,只需要在本轮事件循环最后,等前面更新状态语句都执行完之后...,但Vue会在收到信号之后检查队列中是否已经存在这个任务,保证队列中不会有重复,如果队列中不存在则将渲染操作添加到队列中,之后通过异步方式延迟执行队列中所有渲染操作并清空队列,当同一轮事件循环中反复修改状态时...$nextTick方法,Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,修改数据之后立即使用这个方法,能够获取更新后DOM。...通过一个简单例子来演示$nextTick方法作用,首先需要知道Vue更新DOM时是异步执行,也就是说更新数据时其不会阻塞代码执行,直到执行栈中代码执行结束之后,才开始执行异步任务队列代码,

2K31

一张图带你搞懂Node事件循环

因为Node和操作系统打交道,所以事件循环比较复杂,也有一些自己特有的API。 事件循环不同操作系统里有一些细微差异。这将涉及到操作系统知识,暂时不表。...但是node里边有六个队列 到达一个队列后,检查队列是否有任务(也就是看下是否有回调函数)需要执行。如果有,就依次执行,直到全部执行完毕、清空队列。 如果没有任务,进入下一个队列去检查。...也没有任务回调 poll队列等待……不断轮询看有没有回调 文件读完,poll队列有了fsFunc回调函数,并且被执行,输出「fs + 时间」 while死循环那里卡300毫秒, 死循环卡到200ms...check是poll阶段紧接着下一个。所以向下过程中,先执行check阶段回调,也就是先打印setImmediate。...所以起名字叫Immediate,表示立即意思。 但是后来问题是,poll里可能有N个任务连续执行,执行期间想要执行setImmediate是不可能。因为poll队列不停,流程不向下执行。

1.1K21

处理异步事件三种方式

先看一个 setTimeout 例子: // callback function withCallback() { console.log('start') setTimeout(() =>...// callback func setTimeout 被执行后,当过了指定时间间隔之后,回调函数会被放到队列末端,再等待事件循环处理到它。...❝注意:也就时因为这种机制,开发者设定给 setTimeout 时间间隔,并不会精准等于从执行到触发所经过时间,使用时要特别注意! ❞ 回调函数虽然开发中十分常见,但也有许多难以避免问题。...例如由于函数需要被传递给其他函数,开发者难以掌控其他函数处理逻辑;又因为回调函数仅能配合 try … catch 捕捉错误,当异步错误发生时难以控制;另外还有最著名“回调地狱”。 ?...另外在用循环处理异步事件时,需要注意在 ES6 之后提供很多 Array 方法都不支持 async/await 语法,如果这里用 forEach 取代 for,结果会变成同步执行,每隔 0.5 秒就打印出数字

84350
领券