时间戳

首页 > 解决方案 > js中的定时动作（每秒帧数）

javascript - js中的定时动作（每秒帧数）

问题描述

我正在做一个小游戏，我需要做一些动画（比如每秒帧数），到目前为止，我自己设法做到了：

var loadCount = 0;
var ticks = 15;


function loadingLoop() {
    loadCount++;
}

switch (loadCount) {
    case 1:
        $("#img").attr("src", "src/images/cenario/img004.png");
        break;
    case 2:
        $("#img").attr("src", "src/images/cenario/img005.png");
        break;
    case 3:
        $("#img").attr("src", "src/images/cenario/img006.png");
        break;
    // etc.... //
}

setInterval(function(){ 
    if (loadCount >= 6 && loadCount <= ticks){
        loadingLoop();
        if (loadCount === ticks) {
            clearInterval();
        }
        console.log(loadCount);
    }
}, 500);

所以我想知道是否有更好的方法来做到这一点。

标签： javascripthtmljquerycss

解决方案

因为您的图像编号与 loadCount 的关联非常明确，您可以减少所需的代码行数。不必在 switch 中拼出每个实例，您可以简单地使用以下内容：

  $("#img").attr("src", "src/images/cenario/img" + (loadCount+3).toString().padStart(3, '0') + ".png");

padStart接受一个代表数字的字符串并在开头用一个字符填充它，在这种情况下，我们要求将 0 放在前面。3 表示我们需要 3 位数字。

我在您的计时功能中注意到的另一件事是您没有保存 setInterval，但您尝试清除它。根据您要执行的操作，您可能需要以下内容：

let interval = setInterval(function(){ 
    if (loadCount >= 6 && loadCount <= ticks){
        loadingLoop();
        if (loadCount === ticks) {
            clearInterval(interval);
        }
        console.log(loadCount);
    }

}, 500);

推荐阅读