3分でわかるJSの動作仕組み

作動機構

シングルスレッドの非同期メカニズム

同期: プログラム順に実行
非同期: タイマー、Ajax 読み取りファイル

同期プログラムの実行が完了した後、非同期プログラムが実行されますが、後でタイマーがキューに入れられた場合は、タイマーをどれだけ長く設定しても後で実行する必要があります。だからタイマーは不正確だ

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

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

実行スタックとタスクキューには2つの概念があり、同期コードは実行スタックに配置され、非同期プログラムはタスクキューに配置されます。

事件循环:不断检测任务队列中有没有任务。例如,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オブジェクト

//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

非同期関数

1. async 関数の戻り値は Promise オブジェクトです

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

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

2. 使用を待つ

非同期コードは同期コードに似ています

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

おすすめ

転載: blog.csdn.net/DragonOfMoon/article/details/124116353