"Pause in the function" is possible (some blocking call, whatever it is), but it won't help you. Such "pause" is just a wrong idea.
Animation is the sequence of the calls to
window.requestAnimationFrame
, optionally, with some data needed for frame rendering and, typically, time stamp to be taken into account in rendering. If there is no such data, it could be animation related data associated with the frame and calculated after each frame update. One of the ways to "pause" is to set a flag to stop frame updating and changing the state of the state machine you are using in rendering. The frame update code can read this flag and, say, exit the update function.
Please take a source code of my JavaScript application
Tetris on Canvas published on CodeProject, and see how a pause can be organized.
[EDIT]
From my code, you will see that
window.requestAnimationFrame
might not be available in some some browsers. But then it can be implemented in some fallback way based on
window.setTimeout
, so, essentially, this function still can be used. Please see for further detail:
http://paulirish.com/2011/requestanimationframe-for-smart-animating.
—SA