Question

我正在通过Three.js开展一些个人项目。我使用requestAnimationFrame功能。我想每2秒调用一次函数。我搜索但我找不到任何有用的东西。

我的代码是这样的：

function render() {
   // each 2 seconds call the createNewObject() function
   if(eachTwoSecond) {
      createNewObject();
   }
   requestAnimationFrame(render);
   renderer.render(scene, camera);
}

任何想法？

Answer 1

requestAnimationFrame将单个参数传递给您的回调，该参数指示requestAnimationFrame触发回调时的当前时间（以毫秒为单位）。您可以使用它来计算render()次呼叫之间的时间间隔。

var last = 0; // timestamp of the last render() call
function render(now) {
    // each 2 seconds call the createNewObject() function
    if(!last || now - last >= 2*1000) {
        last = now;
        createNewObject();
    }
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

Answer 2

由于requestAnimationFrame将以60fps的速度为您提供可用的帧（如果您的浏览器可以跟上它），等待2秒并请求帧就可以了。通过这种方式，浏览器将在这2秒之后准确地为您提供一个帧，这在大多数情况下将是即时的：

        function render() {
            // each 2 seconds call the createNewObject() function
            createNewObject();
            renderer.render(scene, camera);
        }

        setInterval(function () {
            requestAnimationFrame(render);
        }, 2000);

Answer 3

我遇到了类似的问题并提出了这个解决方案：

let i = 0
function render() {
   if (++i % 120 == 0) doSomething()
   requestAnimationFrame(render)
}

P.S。 120不是秒，而是帧。

Answer 4

此函数每 2 秒打印一个数字

let last = 0;
let num = 0;
let speed = 2;

function main(timeStamp) {
  let timeInSecond = timeStamp / 1000;

  if (timeInSecond - last >= speed) {
    last = timeInSecond;
    console.log(++num);
  }

  requestAnimationFrame(main);
}

main();

在requestAnimationFrame中每隔x秒调用一个函数

4 个答案: