プログレスバーとプロセス期間タイマーを一緒に作成するタスクがありました。だから、二度考えずに私はこれをしました:
<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);
}
時間は実際には別の変数から取得されます。これはデモ用のものです (実際に値がミリ秒単位であることを示すため)。
そして、それは(私のPCだけでなく)機能し、今でも機能していますが、このサイクルが実行されていると、procmonはブラウザー(chrome、ff)プロセスでCPUスパイクを示します-通常の0.5%ではなく30〜40%。
これを行うより効率的な方法はありますか?