Click here to Skip to main content
15,940,550 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.

let speed = 2;
let lastPaintTime = 0;

//Game functions
function main(ctime) {
  if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
  lastPaintTime = ctime;

//Main logic starts here

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.

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?

What I have tried:

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.

When window.requestAnimationFrame(main) runs inside the main function, it calls web api which runs outside of main thread and places the callback in queue and then result is obtained, meanwhile parallely other code (code below "window.requestAnimationFrame(main)" are running and hence the "if" parts gets executed.
Updated 7-Jan-23 5:14am

1 solution

Look at the conditional expression in the if statement:
if ((ctime - lastPaintTime) / 1000 < 1 / speed)

Do you some kind of comparison operator in there anywhere? No? If there is no comparison operator, the default for determining true or false is to evaluate the expression and determine if the result is 0 or not. If the result is non-zero, the result is true, otherwise false.
Share this answer
bhaskar977 7-Jan-23 11:18am    
that's not the question though.
Dave Kreskowiak 7-Jan-23 11:33am    
I misunderstood. Sorry.

The way you seem to be understanding the code would result in an infinite loop and do nothing at all except crash with a stack overflow exception.

The first line of code in the main method does NOT make another call to the main method. All it does is setup which method is going to be called on the next request for an animation frame, otherwise known as a "callback".

Once that is set, the code continues execution the main method with the if statement...

Window.requestAnimationFrame() - Web APIs | MDN[^]
Understanding JavaScript's requestAnimationFrame() method for smooth animations[^]
Dave Kreskowiak 7-Jan-23 11:34am    
Oh, and CharGPT is not a good source for code or explanations of it.
bhaskar977 9-Jan-23 9:12am    
Can you clarify your point with a diagram or figure? I am not getting it still, that's why.
Dave Kreskowiak 9-Jan-23 9:17am    
No, because there's nothing to diagram. The line you think calls main again, does not do that. The call to requestAnimationFrame does NOT call main when that line of code is executed. What it does is tell window which method to call (in your case, main) when the next frame of animation is requested. This gives your code the opportunity to make changes, or do whatever, when the next animation frame is drawn.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900