console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
console.log()
start
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
requestAnimationFrame()
start
requestAnimationFrame()
console.log()
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
start
requestAnimationFrame()
SetTimeout()
SetTimeout()
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
start
requestAnimationFrame()
Promise()
SetTimeout()
console.log("Animation~")
console.log("Task run")
promise run
.then()
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
start
console.log("Animation~")
console.log("Task run")
console.log()
promise run
end
.then()
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
start
console.log("Animation~")
console.log("Task run")
console.log()
promise run
end
.then()
.then()
Microtask run
console.log()
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()
EventLoop
start
console.log("Animation~")
console.log()
promise run
end
console.log("Task run")
console.log()
Microtask run
Task run
console.log("start");
requestAnimationFrame(function () {
console.log("Animation Frames Run");
});
setTimeout(() => {
console.log("Task Run");
}, 0);
new Promise((resolve) => {
console.log("promise run");
resolve();
})
.then(() => {
console.log("Microtask1 run");
})
console.log("end");Code
Console
CallStack
Web API
MicroTaskQueue
AnimationFrames
TaskQueue
Main()