1. 程式人生 > >Promise的事件迴圈

Promise的事件迴圈

1.Promise 新建後立即執行

let promise = new Promise(function(resolve, reject) {
	console.log('Promise');
	resolve();
});

promise.then(function() {
	console.log('resolved');
});

console.log('我是同步任務');

列印結果依次是:Promise , 我是同步任務 , resolved。

說明,Promise 新建後立即執行,然後, then 方法指定的回撥函式,將在當前指令碼所有同步任務執行完才會執行。

2.Promise 與setTimeout執行的先後

(1)立即執行的Promise

Promise.resolve().then(function() {
	console.log('resolved');
});

console.log('我是同步任務');

setTimeout(function(){
	console.log('event loop')
})

列印結果依次是: 我是同步任務 , resolved,event loop。

上面程式碼,setTimeout在下一輪“事件迴圈”開始時執行。

說明,立即 resolve 的 Promise 物件,是在本輪“事件迴圈”(event loop)的結束時,而不是在下一輪“事件迴圈”的開始時

(2)非立即執行的Promise

第一種:非同步請求的Promise:

let thenable = {
	then: function(resolve, reject) {
		$.ajax({
			url:"test.php",
			complete:function(result){
	       		console.log('非同步資料請求完畢了');
	       		resolve('resolved');
		    }
		});
	}
};

Promise.resolve(thenable).then(val=>console.log(val))
; console.log('我是同步任務'); setTimeout(function(){ console.log('event loop') })

列印結果依次是: 我是同步任務 ,非同步資料請求完畢了,resolved,event loop。

說明:Promise 新建後立即執行,then 方法指定的回撥函式,將在當前指令碼所有同步任務執行完才會執行。最後下一輪“事件迴圈”開始時執行setTimeout。

第二種:使用setTimeout的Promise:

let thenable = {
	then: function(resolve, reject) {
		setTimeout(function(){
			console.log('Promise');
			resolve('resolved');
		})
	}
};

Promise.resolve(thenable).then(val=>console.log(val));

console.log('我是同步任務');

setTimeout(function(){
	console.log('event loop')
})

列印結果依次是: 我是同步任務 , event loop ,Promise , resolved。

說明:Promise 指定在下一輪“事件迴圈”再執行resolved,而在下一輪“事件迴圈”中,外部的setTimeout在任務佇列中首先執行。