使用rAF.js每秒运行JavaScript代码

Run JavaScript code every second with rAF.js?

本文关键字：运行 JavaScript 代码 rAF js 使用      更新时间：2023-09-26

我从使用setTimeout改为使用requestAnimationFrame。http://paulirish.com/2011/requestanimationframe-for-smart-animating/

我如何在我的animation()循环内设置一些代码只执行每秒?

我现在做的是:

animate() {
  if(playGame) {
    requestAnimFrame(animate);
  }
  var time = new Date().getTime();
  if(time % 1000 <= 10) {
    // code to run ~every second
  }
  // Also need to fix this, as it executes too fast, need to add score only 
  // every 100 milliseconds (player must stay in zone for 2 seconds to win)
  if(playerInZone()) {
    gameScore++;
    if(gameScore >= 100) {
      endGame();
    }
  } else {
    gameScore = 0;
  }
}

我不确定这样调用时间和执行模是否是正确的方式?另外，我该如何改变gameScore代码，使其每隔200毫秒才触发一次?

注意:
我在JavaScript文件的顶部使用以下代码:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

但我也包括rAF.js在我的文件，但不确定使用哪个:

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

当requestAnimationFrame被调用时，"current time"以毫秒为单位发送，所以你可以这样做:

var lastTime = 0;
animate(currentTime) {
  if (currentTime >= lastTime + 1000)  {
     // one second has passed, run some code here
     lastTime = currentTime;
  }

  if(playGame) {
    requestAnimationFrame(animate);
  }
}
相关文章：