Question

我正在创建一台老虎机，我需要放慢循环速度或创建某种动画，以便可以看到图像在屏幕上移动。

我已经进行了几次测试，看起来一切正常，在此过程中我也没有进行不必要的图像更改，但也没有减慢速度，尽管循环已运行了一个以上，但我只能看到当前图像和最后一张图像一千次。

imageOnBackgroundContext

我希望看到图片随着旋转的印象而变化，但只有第一张和最后一张显示。

任何想法都将不胜感激。我正在学习，所以我的代码看起来非常简单，而且我仍然不知道如何使用许多功能。

Answer 1

代替循环并不能保证每次更新都将控制权交还给渲染子进程，请尝试使用迭代函数调用：

const YOUR_DELAY = 10;
function doTheThing(i) {
  if (i === 0) return;
  // step
  setTimeout(() => doTheThing(i - 1), YOUR_DELAY);
}

doTheThing(5);

Answer 2

不确定哪个循环会变慢，但是您可以尝试使用const cursor = db.collection('someCollection').find({}) for (let doc = await cursor.next(); doc; doc = await cursor.next()) { // Process the document. }尝试以下操作：

setTimeout

Answer 3

您可以使用代码belwo对FPS进行动画处理或调用您的函数。

function AnimationLoop(fn, fps) {
    let now;
    let delta;
    let interval;
    let then = new Date().getTime();

    let frames;
    let oldtime = 0;

    return (function loop(time) {
        requestAnimationFrame(loop);

        interval = 1000 / (fps || 60);
        now = new Date().getTime();
        delta = now - then;
        if (delta > interval) {
            then = now - (delta % interval);
            frames = 1000 / (time - oldtime)
            oldtime = time;
            fn(frames);
        }
    }(0));
};

let counter = 10;
function countdown() {
    counter--;
    console.log(counter);
}

AnimationLoop(function(fps){
    countdown();
}, 1); // 1 is FPS, 1 Frame per Second, If you do it, 5 it will call your function 5 times in a second.

放慢循环或创建动画？

3 个答案: