js: Switch to window.requestAnimationFrame() for timing

This is an API specifically designed for the purposes of timing
animations.  Unlike setInterval, it tries to synchronise with the screen
refresh rate.  It naturally passes us timing information, saving the
need to construct a Date object every frame.  It has the nice feature
that browsers (at least Firefox 91) will call it less frequently when
the puzzle page isn't visible, which saves CPU time in puzzles that run
a timer continuously.

1 files changed, 21 insertions, 13 deletions

diff --git a/emcclib.js b/emcclib.js
index 84336f3..497451a 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -194,29 +194,37 @@ mergeInto(LibraryManager.library, {
     /*
      * void js_activate_timer();
      *
-     * Start calling the C timer_callback() function every 20ms.
+     * Start calling the C timer_callback() function every frame.
      */
     js_activate_timer: function() {
-        if (timer === null) {
-            timer_reference_date = (new Date()).valueOf();
-            timer = setInterval(function() {
-                var now = (new Date()).valueOf();
-                timer_callback((now - timer_reference_date) / 1000.0);
-                timer_reference_date = now;
-                return true;
-            }, 20);
+        if (!timer_active) {
+            timer_reference = performance.now();
+            var frame = function(now) {
+                current_timer = null;
+                timer_callback((now - timer_reference) / 1000.0);
+                /* The callback may have deactivated the timer. */
+                if (timer_active) {
+                    timer_reference = now;
+                    current_timer = window.requestAnimationFrame(frame);
+                }
+            }
+            timer_active = true;
+            current_timer = window.requestAnimationFrame(frame);
         }
     },
 
     /*
      * void js_deactivate_timer();
      *
-     * Stop calling the C timer_callback() function every 20ms.
+     * Stop calling the C timer_callback() function every frame.
      */
     js_deactivate_timer: function() {
-        if (timer !== null) {
-            clearInterval(timer);
-            timer = null;
+        if (timer_active) {
+            timer_active = false;
+            if (current_timer !== null) {
+                window.cancelAnimationFrame(current_timer);
+                current_timer = null;
+            }
         }
     },