使用requestAnimationFrame作为Timer

Question

这是我正在研究的多人游戏“猜单词”回合制游戏。

我有一个应该从给定数字倒计时的页面。如果在时间限制之前提交了单词猜测，则调用SignalR hub方法。如果达到0，则调用不同的SignalR集线器方法。在这两种情况下，hub方法都会将消息发送回所有相关客户端（在一个组中）。

有人推荐，而不是JS计时器，我可以使用requestAnimationFrame，它每17毫秒更新一次。

所以这是我在Play.aspx文件中的requestAnimationFrame代码......

function turnTimerOn() { //called by server code as a startup script

      var timerStep = '<%=Application(Session("GameID") & "_TimeLimit")%>';
      timerStep = Number(timerStep);

      var startT = Date.now();
      var timedifference = 0;
      var countdown = document.getElementById('SecondsLeft');
      requestAnimationFrame(function anim() {
               requestAnimationFrame(anim);
               startT = startT || Date.now();
               countdown.innerHTML = timerStep - ((Date.now() - startT) / 1000 | 0);
               timedifference = (Date.now() - startT) / 1000 | 0;

               if (timedifference >= timerStep) {

                      startT = Date.now();
                      timedifference = 0;

                      countdown.innerHTML = "";
                      TomatoHubProxy.invoke('NextPlayer', '<%=Session("username")%>', '<%=Session("GameID")%>');
                 } 
           });

     }

来自SignalR集线器的返回消息导致再次执行turnTimerOn（），这意味着再次为当前播放器开始倒计时。

倒计时似乎有效，但有一个错误，它达到3或4之类的低数字，然后重置计数或调用Hub方法（很难说出发生了什么）。当倒计时达到0时，它应该调用Hub方法（这样游戏就可以移动到下一个玩家）

我还应该提到Play.aspx页面永远不会重新加载。所有更新都自动发生（感谢SignalR）

请帮忙。