1.macrotask和microtask
对于微任务和宏任务这里不做介绍。我们在写一些封装逻辑的时候,需要用到macrotask和microtask。这里我参(chao)考(xi) vue.js的实现,封装macrotask和microtask。
2.macrotask封装
macrotask 有setTimeout、MessageChannel、postMessage、setImmediate。
function creatMacroTask(callbacks) {
var macroTimerFunc;
if (typeof setImmediate !== 'undefined') {
macroTimerFunc = function () {
setImmediate(callbacks);
};
} else if (typeof MessageChannel !== 'undefined') {
var channel = new MessageChannel();
var port = channel.port2;
channel.port1.onmessage = callbacks;
macroTimerFunc = function () {
port.postMessage(1);
};
} else {
macroTimerFunc = function () {
setTimeout(callbacks, 0);
};
}
return macroTimerFunc;
};
3.microtask封装
这里我们考虑promise。
function creatMicroTask(callbacks) {
var microTimerFunc;
if (typeof Promise !== 'undefined') {
var p = Promise.resolve();
microTimerFunc = function () {
p.then(callbacks);
};
} else {
microTimerFunc = creatMacroTask(callbacks);
}
return microTimerFunc;
}
4.测试使用
creatMicroTask(function() {
console.log('mic1');
})();
creatMacroTask(function() {
console.log('mac1');
})();
creatMicroTask(function() {
console.log('mic2');
})();
creatMacroTask(function() {
console.log('mac2');
})();
creatMicroTask(function() {
console.log('mic3');
})();
creatMacroTask(function() {
console.log('mac3');
})();
console.log('task');
打印结果:
task
mic1
mic2
mic3
mac1
mac2
mac3
5.优化一下
多次判断是完全没有必要的,我们后面可以采用学习模式优化一下。