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

【问题标题】：Call a function each x second in requestAnimationFrame在 requestAnimationFrame 中每 x 秒调用一个函数
【发布时间】：2015-06-26 22:12:07
【问题描述】：

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

我的代码是这样的：

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

有什么想法吗？

【问题讨论】：

标签： javascript three.js requestanimationframe

【解决方案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);
}

【讨论】：

【解决方案2】：

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

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

附： 120 不是秒而是帧。

【讨论】：

如果你的帧率是 144hz，它会持续 1 秒。在 30hz 屏幕上（如未插电的笔记本电脑），它将持续 0.5 秒。您不能将帧速率作为时间单位。

【解决方案3】：

由于requestAnimationFrame 会为您提供 60fps 的可用帧（如果您的浏览器可以跟上它），等待 2 秒并请求帧似乎完全没问题。这样浏览器会在这 2 秒后给你一个帧，在大多数情况下会在瞬间：

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

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

【讨论】：

谢谢，但我不想降低 fps。我希望 fps 保持在 60。项目中还存在其他动画，我需要它们在制作动画时保持流畅。我想降低 fps 不是解决方案。

【解决方案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();

【讨论】：

【解决方案5】：

每隔给定秒运行一次的简单 JS 计时器

修改 MDN 示例 --> Here.

/*
<div id="test">
        <h1>Hello World</h1>
</div>
*/
const element = document.getElementById('test');
let start, previousTimeStamp;


timerConfig = {
    frequency: 1, // Seconds
    stopAt: 10, // Seconds,
    pos: 1,  // px
    posStep: 10,  // px
    updatePos: () => {
        timerConfig.pos = timerConfig.pos + timerConfig.posStep;
    }
}

function timer(timestamp) {    
    if (start === undefined)  start = timestamp;
    if (previousTimeStamp === undefined)  previousTimeStamp = timestamp;
    const seconds = timerConfig.frequency*1000;
    const tick = timestamp - previousTimeStamp; 

    function trigger() {
        element.style.transform = 'translateX(' + timerConfig.pos + 'px)';
    }

    if (tick >= seconds) {
        trigger();
        previousTimeStamp = timestamp; // Updating The Timer each second
        timerConfig.updatePos();
    }
    if (timestamp < timerConfig.stopAt*1000) requestAnimationFrame(timer); // 10 Seconds    
    
}

requestAnimationFrame(timer);

【讨论】：