How to implement a rendering tool with respect to CPU capabilities

Question

I was wondering what is the best way to implement a visualization tool in JavaScript. This is not the substantial part of the rendering, which is really important here - I would like to hear when and how to effectively run the visualization code.

I currently have window.setInterval(renderFunc, 1000 / 20)one that will just display a frame every 50 ms (i.e. fps = 20).

The fact is that faster computers will not display more frames, and slower computers will not be able to catch up to 20 frames per second, so the function is called more than the computer can handle.

I thought about the loop while(true), but it uses a 100% processor and slows down the computer itself - so my game (rendering from my 3D game) will no longer play, because you can no longer press the buttons.

What is the most effective option in this scenario, or is there a better method that has not crossed my mind?

Thanks in advance.

Answer 1

You can specify the time during which the frame is rendered and adjust the frame interval to achieve an acceptable load. For example, if your current frame took 5 ms to render, and you want 50% of the load, wait 5 ms before the next frame. You will want to put some sanity checks on it, and also probably use the times from the last few frames.

Answer 2

, , window.requestAnimationFrame. , , . :

• Windows/, , .

, -: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

http://jsfiddle.net/paul/XQpzU/2/

Answer 3

while(true) -. . , <canvas> DOM .

https://developer.mozilla.org/En/Using_web_workers

Answer 4

"setInterval () will skip the number of milliseconds after the callback has been called" - https://developer.mozilla.org/en/window.setInterval

You can use this to dynamically adjust the time interval.

NB MDC documents are for Javascript implemented by Mozilla, not ECMA Script or other implementations. You should check if this works in other browsers.