xgqfrms / learning

learning : A collection of all kinds of resources, videos, pdf, blogs, codes... 📚 + 💻 + ❤
https://learning.xgqfrms.xyz
MIT License
16 stars 12 forks source link

why is the setInterval task executed slower than the setTimeout task in the browser javascript environment? #144

Open xgqfrms opened 1 year ago

xgqfrms commented 1 year ago

why is the setInterval task executed slower than the setTimeout task in the browser javascript environment?

为什么在浏览器 javascript 环境下 setInterval 任务执行速度比 setTimeout 任务慢?


setTimeout(() => {
  console.log(`4`);
});

let id = setInterval(() => {
  console.log(`5`);
  clearInterval(id);
});

Promise.resolve().then(() => console.log(`2`));

queueMicrotask(() => {
  console.log(`3`);
});

console.log(`1`);

/*

1
2

3
4
5

*/

image

xgqfrms commented 1 year ago

Node.js

setTimeout(() => {
  console.log(`4`);
});

let id = setInterval(() => {
  console.log(`5`);
  clearInterval(id);
});

Promise.resolve().then(() => console.log(`2`));

queueMicrotask(() => {
  console.log(`3`);
});

console.log(`1`);

/*

1
2
3
4
5

*/

image

xgqfrms commented 1 year ago
let startTime = new Date();
setTimeout(() => {
  let endTime = new Date();
  console.log(endTime - startTime);
}, 0);
for (let i = 0; i < 10**6; i++) {
   // 任务中的同步代码执行时间过长,导致异步宏任务 setTimeout 的执行时间延后 bug
}

image