我已经被介绍微任务和宏任务的概念已有一段时间了,从我阅读的所有内容中,我一直认为 setTimeout
被认为可以创建宏任务和 Promise.resolve()
(或NodeJS上的process.nextTick
)来创建微任务。
(是的,我知道Q和Bluebird等不同的Promise库具有不同的调度程序实现,但是这里我指的是每个平台上的本机Promises)
考虑到这一点,我无法解释NodeJS上的以下事件顺序(Chrome的结果不同于NodeJS(v8 LTS和v10都不同,并且与我对此主题的理解相符))。
for (let i = 0; i < 2; i++) {
setTimeout(() => {
console.log("Timeout ", i);
Promise.resolve().then(() => {
console.log("Promise 1 ", i);
}).then(() => {
console.log("Promise 2 ", i);
});
})
}
因此,我在Chrome上获得的结果(与我对Micro / Macro任务的理解以及Promise.resolve和setTimeout的行为方式一致)是
Timeout 0
Promise 1 0
Promise 2 0
Timeout 1
Promise 1 1
Promise 2 1
在NodeJS输出上执行的相同代码:
Timeout 0
Timeout 1
Promise 1 0
Promise 2 0
Promise 1 1
Promise 2 1
我正在寻找一种在Chrome上获得与NodeJS相同结果的方法。我也用process.nextTick
而不是Promise.resolve()
进行了测试,但是结果是相同的。
有人能指出我正确的方向吗?
答案 0 :(得分:1)
您无法控制不同的体系结构如何对承诺和超时进行排队。
优秀的阅读这里:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
如果您希望获得相同的结果,就必须兑现承诺。
let chain = Promise.resolve(null)
for (let i = 0; i < 2; i++) {
console.log("Chaining ", i);
chain = chain.then(() => Promise.resolve()
.then(() => {
setTimeout(() => {
console.log("Timeout ", i);
Promise.resolve()
.then(() => {
console.log("Promise 1 ", i);
})
.then(() => {
console.log("Promise 2 ", i);
})
}, 0)
}))
}
chain.then(() => console.log('done'))
答案 1 :(得分:1)
NodeJs团队认为这是一个错误,更多详细信息请点击:https://github.com/nodejs/node/issues/22257
同时,它已经修复并发布,它包含Node v11。
最好, 乔斯
答案 2 :(得分:0)
我并不是说我做对了,我写过一些特别的东西,我想请您测试以下内容:
包装器:
function order(){
this.tasks = [];
this.done = false;
this.currentIndex = 0;
this.ignited = false;
}
order.prototype.push = function(f){
var that = this,
args = Array.prototype.slice.call(arguments).slice(1);
if(this._currentCaller){
this.tasks.splice(
this.tasks.indexOf(this._currentCaller) + 1 + (this.currentIndex++),
0,
function(){that._currentCaller = f; f.apply(this,args);}
);
} else {
this.tasks.push(function(){that._currentCaller = f; f.apply(this,args);});
}
!this.ignited && (this.ignited = true) && this.ignite();
return this;
}
order.prototype.ignite = function(){
var that = this;
setTimeout(function(){
if(that.tasks.length){
that.tasks[0]();
that.tasks.shift();
that.repeat(function(){that.reset(); that.ignite()});
} else {
that.ignited = false;
that.reset();
}
},0);
}
order.prototype.repeat = function(f){
var that = this;
if(this.done || !this.tasks.length){
f();
} else {
setTimeout(function(){that.repeat(f);},0);
}
}
order.prototype.reset = function(){
this.currentIndex = 0;
delete this._currentCaller;
this.done = false;
}
要使用:
创建实例:
var x = new order;
然后修改其余部分:
for (let i = 0; i < 2; i++) {
x.push(function(i){
setTimeout(() => {
console.log("Timeout ", i);
x.push(function(i){
Promise.resolve().then(() => {
console.log("Promise 1 ", i);
}).then(() => {
console.log("Promise 2 ", i);
x.done = true;
})
},i);
x.done = true;
});
},i);
}
我明白了:
Timeout 0
Promise 1 0
Promise 2 0
Timeout 1
Promise 1 1
Promise 2 1
您甚至可以详细说明:
for (let i = 0; i < 2; i++) {
x.push(function(i){
setTimeout(() => {
console.log("Timeout ", i);
x.push(function(i){
Promise.resolve().then(() => {
console.log("Promise 1 ", i);
}).then(() => {
console.log("Promise 2 ", i);
x.done = true;
})
},i)
.push(function(i){
Promise.resolve().then(() => {
console.log("Promise 1 ", i);
}).then(() => {
console.log("Promise 2 ", i);
x.done = true;
})
},i+0.5)
.push(function(i){
Promise.resolve().then(() => {
console.log("Promise 1 ", i);
}).then(() => {
console.log("Promise 2 ", i);
x.done = true;
})
},i+0.75);
x.done = true;
});
},i);
}
在节点v6中,您得到:
Timeout 0
Promise 1 0
Promise 2 0
Promise 1 0.5
Promise 2 0.5
Promise 1 0.75
Promise 2 0.75
Timeout 1
Promise 1 1
Promise 2 1
Promise 1 1.5
Promise 2 1.5
Promise 1 1.75
Promise 2 1.75
您会为我在您的节点版本中尝试此操作吗?在我的节点(6.11,我知道它很旧)中。
在chrome,firefox,节点v6.11上进行了测试
注意:您不必保留对“ x”的引用,在所推送的函数中,this
引用的是order
实例。您还可以使用Object.defineProperties
来使getter / setter变得不可配置,以防止意外删除instance.ignited
等。