Question

我有一个任务是创建一个进度条和一个进程持续时间计时器。所以，不要三思我做到了：

<div class="mainInfo">
    <div id="timer"><span id="elapsedText">0:00</span>/<span id="durationText">3:00</span></div>
    <div id="progressBar"><div id="progress" style="width:0;"></div></div>
</div>

和JS：

var time = 1000;
var duration = 180;

var $progress = $("#progress");
var $elapsedText = $("#elapsedText");

updateTime();

function updateTime() {
    var elapsed = time / 1000;
    $elapsedText.text(Math.floor(elapsed / 60) + ":" + Math.floor(elapsed % 60));
    $progress.css('width', (elapsed * 100 / duration) + "%");
    time = time + 1000;
    setTimeout("updateTime()", 1000);
}

实际上是从另一个变量中检索时间 - 这个是演示的变量（以说明我实际上有以毫秒为单位的值）。

它工作（不仅在我的电脑上），而且仍然如此，但是当这个循环运行时，procmon显示浏览器（chrome，ff）进程的CPU峰值 - 30-40％而不是常规的0.5％

有更有效的方法吗？

Answer 1

有一个标准功能：SetInterval(function, delay_in_ms)。

它以毫秒为间隔调用函数。

Answer 2

而不是

setTimeout("updateTime()", 1000);

使用

setTimeout(updateTime, 1000);

每秒调用编译器的事实可能会严重影响性能。将字符串传递给setTimeout基本上会导致eval内的setTimeout。

Answer 3

尝试使用setInterval函数。

Answer 4

你使用jQuery会让我感到不安......

var time = 1000;
var duration = 180;

var $progress = document.getElementById("progress");
var $elapsedText = document.getElementById("elapsedText");

var beginTimestamp = new Date().getTime();

updateTime();
setInterval(updateTime,1000);

function updateTime() {
    var now = new Date().getTime();
    var elapsed = now-beginTimeStamp + time;
    $elapsedText.firstChild.nodeValue = Math.floor(elapsed / 60) + ":" + Math.floor(elapsed % 60);
    $progress.style.width = (elapsed * 100 / duration) + "%";
}

也许没有jQuery，您的浏览器可能运行得更好;）

Answer 5

有一个默认值，即setInterval。

注意，作为setInterval的第一个参数传递的函数总是在全局范围内执行。

第二，进度条通常是在旁边昂贵的流程中创建的。您只是将它用于显示目的并强制延迟，我并不特别感兴趣，但如果您喜欢布局，我想您可以选择它。

您通常使用它的方式是：

executeFirstPotentiallyExpensiveProcess();// this is a call to a big function.
// then update the value of the progress bar in percentage style.
executeSecondPotentiallyExpensiveFunction()// this is the second part of your process.
// then again update..
// repeat until you have 100%.
// Basically, you logically divide the expenses of your various executions
// into numerable bits, preferably equal to one another for your convenience,
// but you chunk your loading process or whatever type of process and increment
// the progress after each chunk is complete.

有效的方法来做一个在JavaScript中每秒更新一次的计时器

5 个答案: