RequestAnimatiomFrame / js

Question

When the above keyword(req....) Is used once it works well
But when use again in output , like in game , it becomes slow , how and why ? And how to fix it ???
I can' t give the code for ref. Because it is on spck editor.

Answer 1

Now , I found the answer of it
Soln is to run the game loop always but put a condition on it that is satisfied by only clicking play / resume button . E.g. playing = false while not playing and it is true on playing .
function loop(){
if(playing){
//Code
}
requestAnimationFrame(loop);
}
This will not decrease speed on further playing .

Answer 2

One problem you could be running into is that your code to update display is getting called far more frequently than you want. If JavaScript is busy looping through canvas drawing or other work, the page becomes less responsive.

I would run through the following check list:
- Add console.log near the beginning and end of each redraw, or update display call. At the end, print out the time that elapsed while redraw was working. Print timestamps too. If you have functions handling key input events, add a console.log there too with time stamps.
- Look at the logged redraw timings to see if they become more frequent or take longer while typing.
- Look in your code for extra calls to the update. For a game, generally requestAnimationFrame should be the only thing calling a redraw. Don't let any input event including a keyboard event call the redraw/update display function. Don't use setInterval or setTimeout to call it since they're using a specific interval and you will want the highest refresh rate possible without hurting responsiveness of your UI.