三分钟带你了解JS的运行机制

最新推荐文章于 2025-05-07 13:25:20 发布

望舒忘书

最新推荐文章于 2025-05-07 13:25:20 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/DragonOfMoon/article/details/124116353

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了JavaScript中的单线程异步机制，包括同步与异步的概念，事件循环的工作原理，宏任务与微任务的区别，以及Promise在异步处理中的作用。通过示例展示了代码执行顺序，并介绍了async/await的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行机制

单线程异步机制

同步：就是按程序顺序执行
异步：计时器，ajax 读取文件

同步程序执行完成后执行异步程序，如果计时器排在后面，那么计时器肯定是后面执行，不管设置多久。所以计时器是不准的

process.nextTick(()=>{
	//同步
	//VUE中的
})
同步代码执行之后，异步代码之行之前
setImmediate(()=>{

})
当前事件循环代码执行之后

有运行栈和任务队列两个概念运行栈中放的是同步的代码，然后异步程序会放到任务队列中。

事件循环：不断检测任务队列中有没有任务。例如，setTImeout设置时间，时间到了就会放到任务队列中，然后不断检测，按到先来先执行的顺序来执行。

出个例子

setImmediate(()=>{
	console.log(1)
})
process.nexTick(()=>{
	console.log(2)
})
console.log(3)
setTimeout(()=>{console.log(4)},0)
setTimeout(()=>{console.log(5)},100)
console.log(6)
//结果 362415

宏任务与微任务

宏任务：计时器、ajax、读取文件
微任务：promise.then
执行顺序：
1.同步程序
2.process.nextTick()
3.微任务
4.宏任务
5 setImmediate
扩展上述例子

setImmediate(()=>{
   console.log(1)
})
process.nexTick(()=>{
   console.log(2)
})
console.log(3)
setTimeout(()=>{console.log(4)},0)
setTimeout(()=>{console.log(5)},100)
console.log(6)
new Promise((resolve)=>{
   console.log(7)//在运行栈中执行
}).then(()=>{
   console.log(8)
})
//结果 36728415

Promise对象

//promise es6新增的对象

let p = new Promise((resolve) => {

console.log('hello')

resolve('world')

})

p.then((data) => {

console.log(data)

})

//输出只有hello 只有调用resolve才会调用then

axios.get('').then((res)=>{

console.log(res);

})

//get方法返回的是promise对象，reslove传回res

async函数

1.async函数的返回值是promise对象

async function fun(){
	return 1;
}
//相当于
function fun(){
	return new Promise((resolve)=>{
		resolve(1);
	})
}

fun().then((data)=>{
	console.log(data);
	//这样就拿到了返回值
})

2.await 用法

异步的代码更像是同步的代码

let p = new Promise((resolve)=>{
	resolve(1);
})
let p2 = new Promise((resolve)=>{
	resolve(2);
})
async =