时间戳

首页 > 解决方案 > 如何将 setTimeout 操作更改为 requestAnimationFrame？

javascript - 如何将 setTimeout 操作更改为 requestAnimationFrame？

问题描述

我有这行简单的代码：

timeout() {
  this.tick();

  if (this._running) {
    this._timeoutId = window.setTimeout(this._boundTimeout, this._gameSpeed);
  }
}

startRunning() {
  this._timeoutId = window.setTimeout(this._boundTimeout, this._gameSpeed);
  this._running = true;
}

我知道requestAnimationFrame，你只需要回调作为参数，就像这样

this._timeoutId = window.requestAnimationFrame(timeout);

但是我在哪里this._gameSpeed处理requestAnimationFrame？

[更新]：我设法通过 using 运行requestAnimationFrame(this._boundTimeout)，但它忽略了 FPS，因此几乎不可能捕捉到它的运动。在添加方面this._gameSpeed，我如何处理添加到requestAnimationFrame？

标签： javascript

解决方案

您必须自己计算增量时间，并且仅在它大于您的 FPS 时才执行操作。

这是一个带有示例https://jsfiddle.net/qnkf7x9g/的小提琴

这是相关的代码。

    const FPS = 2; // Frames per second
    const delay = 1000/FPS;
    let previous = 0;
    
    const loop = () => {
    	requestAnimationFrame(loop);
    
    	const now = Date.now();
    
    	if (now - previous < delay) {
      	    // Do nothing
    		return;
    	}
    
    	previous = now;
    
    	// Do something
    	console.log("Hello");
    };
    
    
    loop(); // Start the loop

推荐阅读