4

今日、私は JavaScript での Web ワーカーの世界を紹介されました。これは私にタイマーについて再考させました。私はタイマーをこのように醜い方法でプログラムしていました。

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    $("#timeI").html(time);
}

タイマーを開始するときに日付を保存することでこれを改善できることは知っていますが、私はそれが好きではありませんでした.

ここで、Web Workers を使用する方法を思いつきました。少しベンチマークを行ったところ、はるかに信頼性が高いことがわかりました。私は JavaScript の専門家ではないので、この関数が正しく機能するかどうか、またはどのような問題が発生する可能性があるかを事前に知りたいと思います。

私の JavaScript コード (JQuery を使用していることに注意してください):

$(function() {
    //-- Timer using web worker. 
    var worker = new Worker('scripts/task.js'); //External script
    worker.onmessage = function(event) {    //Method called by external script
        $("#timeR").html(event.data)
    };
};

外部スクリプト ('scripts/task.js'):

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    postMessage(time);
}
timerTick();

私のウェブサイトでライブデモを見ることもできます。

4

2 に答える 2

11

刻々と過ぎていく秒を確実に表示しようとしている場合、それを行うための唯一の信頼できる方法は、開始時に現在の時刻を取得し、タイマーのみを画面の更新に使用することです。各ティックで、現在の時間を取得し、実際の経過秒数を計算して表示します。どちらsetTimeout()もsetInterval()保証されておらず、時間を正確にカウントするために使用することもできません。

次のように実行できます。

var start = +(new Date);
setInterval(function() {
    var now = +(new Date);
    document.getElementById("time").innerHTML = Math.round((now - start)/1000);
}, 1000);

ブラウザがビジー状態になり、タイマーの間隔が不規則になると、画面が少し不規則に更新されることがありますが、画面が更新されたときの経過時間は正確なままです。あなたの方法は、経過時間の誤差を蓄積しやすいです。

この作品はこちらで見ることができます: http://jsfiddle.net/jfriend00/Gfwze/

于 2011-11-30T20:43:40.747 に答える
0

最も正確なタイマーは、2 つのタイムスタンプの比較です。より頻繁に (100 ミリ秒ごとなど) 更新することで、タイマーの精度を上げることができます。setInterval()以上を使用することを好みsetTimeout()ます。

于 2011-11-30T20:44:11.517 に答える