# Why does if condition executes in this requestAnimationFrame code?

**URL:** <https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074>\
**Category:** Uncategorized\
**Created:** [January 7, 2023, 3:18pm UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074 "2023-01-07T15:18:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 7, 2023, 3:18pm UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074/1 "2023-01-07T15:18:20Z")

</div>

I’m currently watching tutorials to build projects as I’m still not in a phase where I can carve a project that I want all on my own.

Currently, working on a snake game.

```auto
let speed = 2;

let lastPaintTime = 0;

//Game functions

function main(ctime) {

window.requestAnimationFrame(main);

if ((ctime - lastPaintTime) / 1000 < 1 / speed) {

return;

}

lastPaintTime = ctime;

gameEngine();

}

//Main logic starts here

window.requestAnimationFrame(main);

```

My confusion:

“If condition” should never be checked on this code. Because:

1. window.requestAnimationFrame(main): It calls main function.

2. At the very first line of main function, it again calls main function. So the control should go to main function and forever it should keep calling itself.

3. The if condition should never be checked.

But I asked chatGPT, and it says that if condition will be executed.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/0/9/0985616eb9db72e879175c272e70be29ebf1d233.png)

It says that it doesn’t immediately call the main function but schedule/queue it.

What’s this behavior called in Javascript language? Where can I read more about it. Is this common for every programming language?

Things I’ve read from chatGPT

> requestAnimationFrame is a method that schedules a function to be called before the next repaint of the browser window. It does not immediately call the function, but rather adds it to a queue of functions to be called at a later time. This allows the browser to update the screen at a consistent frame rate, while also allowing other tasks to be performed in between frames.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 7, 2023, 4:36pm UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074/2 "2023-01-07T16:36:00Z")

</div>

Are you using the `if` code to keep your frame rate consistent? If so, my recent article that covers delta time may be helpful:

> **[Ensuring Consistent Animation Speeds](https://www.kirupa.com/animations/ensuring_consistent_animation_speeds.htm)**
>
> Learn how to ensure consistent speed animations by either fixing the frame rate or by accounting for the delta time.

Regarding what is the underlying concept behind queuing calls, look up **JavaScript Event Loop** 😀

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 7, 2023, 10:44pm UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074/3 "2023-01-07T22:44:53Z")

</div>

These two videos may be helpful:

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/d/8/d80de47810714a115b9c6773a3f382cceb40b5e1.jpeg "Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...") ](https://www.youtube.com/watch?v=cCOL7MC4Pl0)

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/0/0c173637e57c01fc420950ffae918c6f3aadde5b.jpeg "What the heck is the event loop anyway? | Philip Roberts | JSConf EU") ](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 8, 2023, 1:56am UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074/4 "2023-01-08T01:56:23Z")

</div>

thank you. I watched your video about requestAnimationFrame as well.

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 9, 2023, 4:57pm UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074/5 "2023-01-09T16:57:17Z")

</div>

This figure from this blog helped me clear my concepts related to this.

Source: [JavaScript Behind the Scenes: The Event Loop](https://nainacodes.com/blog/understand-the-event-loop-in-javascript)

1. Initially, window.rAF is passed to call stack.

2. By definition, rAF waits till next repaint of window which is 16ms for 60fps screen. It’s like setTimeOut but better.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/8/68ee0b4343e6887b890a8840d5b34303c70641b8.png)

1. window.rAF() is executed, so it is removed from the call stack. Call stack is empty. Meanwhile at the same time, after 16ms has been passed, main() has been put into callback queue.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/f/4/f48f8d7f6e28ae046c477bbad13f1411ccb45ad6.png)

Now here is where the event loop comes in. The event loop is a continuous running process that constantly checks if the call stack is empty or not. If the call stack is empty, it will move the function from the callback queue into the call stack and it gets executed. So, main() gets executed.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/2/1/21c74396bc11ec8b6f583d0b13b75c5e9b71db4c.png)

1. Again, it calls window.rAF(main).

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/8/68ee0b4343e6887b890a8840d5b34303c70641b8.png)

window.rAF() has now executed.

1. Now, the code under window.rAF() runs(the if condition and so on and so forth). After, 16ms, main() is passed to callback queue.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/f/4/f48f8d7f6e28ae046c477bbad13f1411ccb45ad6.png)

main() gets executed.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/2/1/21c74396bc11ec8b6f583d0b13b75c5e9b71db4c.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 9, 2023, 5:29pm UTC](https://forum.kirupa.com/t/why-does-if-condition-executes-in-this-requestanimationframe-code/656074/6 "2023-01-09T17:29:35Z")

</div>

That is a great resource! Thanks for sharing 🙂