Embed

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()

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()

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()