如何制作每 50 毫秒执行一次的 while 循环

Question

我制作了那个 JavaScript 脚本

function videoplayer (frameamt) {
    var frameamount = frameamt + 1
    var frame = 1
    var video = document.getElementsByClassName("vidplyr");
    while (frame < frameamount) {
        var frame = frame + 1
        video.src = frame + ".png"
    }
    if (frame > frameamount) {
        video.src = "1.png"
    }
}

但是如果条件匹配，我想让 while 循环每 50 毫秒执行一次

我想制作一个基于代表帧的图像且帧率为 20 fps 的视频播放器 这意味着我需要每 50 毫秒执行一次来更改图像

Answer 1

您正在寻找的是

setInterval()

而不是

while

循环（或任何其他循环）。在 JavaScript 中让主线程等待（在循环内）是不可取的，因为你必须让 cpu 做一些无用的事情才能节省时间。

这可能是一个起点：

function videoplayer (frameamt) {
    var frameamount = frameamt + 1;
    var frame = 0; // if this is 1 here you only start at frame 2
    var video = document.getElementsByClassName("vidplyr")[0]; // you need [0] here to take the first match
    var interval = setInterval(function () {
        frame = frame + 1;
        video.src = frame + ".png";
        // condition to cancel the interval
        if (frame >= frameamount) {
            clearInterval(interval);
        }
    }, 50) // execute every 50 ms
}

Answer 2

您可以创建一个辅助函数：

async function sleep(ms) { 
  return new Promise(resolve => setTimeout(resolve, ms)); 
}

使你的函数异步，并使用await，如下所示：

await sleep(1000); // 1 second

另一件事，

getElementsByClassName

返回一个html集合。

你的重构函数：

async function videoplayer (frameamt) {
    var frameamount = frameamt + 1
    var frame = 1
    var video = document.getElementsByClassName("vidplyr")[0]; // <- Add the [0]
    while (frame < frameamount) {
        var frame = frame + 1
        video.src = frame + ".png"
        
        await sleep(50); // <- Add this
    }
    if (frame > frameamount) {
        video.src = "1.png"
    }
}