Comments (3)
这个就涉及到事件循环(Event Loop)
JS运行时,对代码执行顺序的一个算法(任务调度算法)
JS 分类:同步任务和异步任务
JS 的执行机制:
- 首先判断JS代码是同步还是异步,同步就进入主线程,异步就进入 event table
- 异步任务在 event table 中注册函数,当满足触发条件后,被推入event queue
- 同步任务进入主线程后一直执行,直到主线程空闲时,才回去 event queue 中查看是否有可执行的异步任务,如果有就推入主线程
event loop 里有维护两个不同的异步任务队列
- macro Tasks(宏任务):script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering
- micro Tasks(微任务):process.nextTick, Promise(浏览器实现的原生Promise), Object.observe, MutationObserver, MessageChannel
每次执行一段代码(一个script标签)都是一个 macroTask
执行流程:
- event loop 开始
- 从macro Tasks 队列抽取一个任务,执行
- micro Tasks 清空队列执行,若有任务不可执行,推入下一轮 micro Tasks
- 结束 event loop
那么回到题目上去,就是
setTimeout(function(){
console.log(1); // 1-放入宏任务队列,7-执行下一轮事件循环,宏任务输出1
},0);
new Promise(function(resolve) {
console.log(2); // 2-同步输出 2
for(let i=0; i<10000 ; i++ ) {
i==9999 && resolve();
}
console.log(3); // 4-同步输出 3
}).then(function(){
console.log(4); // 3-放入微任务队列,6-回到微任务队列,执行剩余的微任务,输出4
});
console.log(5); // 5-同步输出 5
from fe-interview.
看完你的解释,我理解是先执行宏任务,因为settimeout延迟是0,所以应该是先输出1,再输出4。但是实际结果却是4,1
from fe-interview.
看完你的解释,我理解是先执行宏任务,因为settimeout延迟是0,所以应该是先输出1,再输出4。但是实际结果却是4,1
1-放入宏任务队列,7-执行下一轮事件循环,宏任务输出1, 所以在最后输出。
from fe-interview.
Related Issues (20)
- nuxt有哪些特性?为什么要用nuxt做服务端渲染?它解决了什么问题? HOT 1
- CSS Sprites(雪碧图)原理及其优缺点 HOT 1
- 图片懒加载原理及如何实现 HOT 1
- JS获取url参数的方法 HOT 1
- 手写实现一个合乎规范的Promise HOT 1
- requestAnimationFrame原理及兼容性封装 HOT 1
- 用过HappyPack吗?HappyPack有什么优点? HOT 2
- eslint忽略全局变量的方法 HOT 1
- webpack配置路径别名 HOT 1
- webpack添加路径别名后,vscode不能智能提示,如何解决? HOT 1
- 如何只用两行代码实现判断js中所有数据类型 HOT 1
- nrm和nvm HOT 1
- 不用window.open打开新窗口 HOT 1
- js变量提升 HOT 1
- js中精度问题及解决方案 HOT 2
- webpack之less-loader、css-loader、style-loader执行顺序 HOT 1
- js实现普通数组去重&json数组去重 HOT 1
- 常见的js模板引擎
- js原生实现拷贝到剪贴板 HOT 1
- iframe内嵌网页未知高度如何自适应 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.