<a href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout()</a> method sets a timer which executes a function or specified piece of code once the timer expires. These tasks are queued to the <code>Macrotask Queue</code>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a> method tells the browser that you wish to call a specified function to update an animation before the next repaint. These tasks are queued to the <code>Animation Queue</code>
Since, JS is single-threaded, the main thread can only execute one statement at a time. The order in which this execution happens is—
<ol>
<li>First all synchronous tasks are queued</li>
<li>The micro task queue (promises) will execute immediately when the JS run stack is empty</li>
<li>The animation queue is executed</li>
<li>The priority of macro task queue is lower than that of micro task queue and animation queue</li>
</ol>
So here, first the synchronous statement <code>1</code> gets logged. Then setTimeout of <code>2</code> is added to macrotask queue. Then, RAF <code>3</code> is queued in the animation queue. Next, RAF <code>4</code> is queued to the animation queue and <code>5</code> is queued to the macrotask queue. Lastly, <code>6</code> is a synchronous statement so it gets printed second.
Now, since the main call stack is empty, animation queue tasks are executed (as they have higher priority over macrotask queue). Hence, order in which they get printed is
1 -&gt; 6 -&gt; 3 -&gt; 4 -&gt; 2 -&gt; 5
<pre class="shiki github-dark shaku"><code>console.log(1) 1️⃣setTimeout(() =&gt; { console.log(2) 5️⃣}, 100)requestAnimationFrame(() =&gt; { console.log(3) 3️⃣})requestAnimationFrame(() =&gt; { console.log(4) 4️⃣ setTimeout(() =&gt; { console.log(5) 6️⃣ }, 10)})const end = Date.now() + 200;while (Date.now() &lt; end) {}console.log(6) 2️⃣// 1// 6// 3// 4// 2// 5</code></pre>

RAF vs setTimeout

What does the code snippet to the right output by console.log?…