0

同じページに複数のカウント ダウン タイマーを表示しようとしています。今私が知る限り、jquery プラグインやその他のスクリプトを使用せずにそれを行うには 2 つの方法があります (良い方法を知っている場合はお知らせください)。

  1. 1秒から始まりsetInterval、ミリ秒を含むグローバル変数で、間隔ごとに-1000だけ減らします。

  2. グローバル変数から1秒を短縮する関数を作成し、その関数の下部でその関数setTimeoutを実行する1秒を設定するため、基本的に1秒ごとに再帰します。

私の質問は、2 つのオプションのどちらがより適切かつ/またはより高速に機能するかということです。

両方のデモコードを次に示します。

setInterval:

var amount_of_seconds_left = 46800000;

setInterval(function(){
if(amount_of_seconds_left > 1000){
    amount_of_seconds_left -= 1000;
}
},1000);

setTimeout:

var amount_of_seconds_left = 46800000;
function startTime(){
if(amount_of_seconds_left > 1000){
    amount_of_seconds_left -= 1000;
    t=setTimeout(function(){startTime()},1000);
}
}

どちらの方法でも機能しますが、パフォーマンスに関してはどちらが優れているのか疑問に思っていましたが、パフォーマンスはこれで問題になるのでしょうか?

4

2 に答える 2

0

setIntervalまたsetTimeout、1000ミリ秒後に開始しないでください。たとえば、別のスクリプトが実行されている場合は、両方とも遅延が発生する可能性があります。を使用しsetIntervallて表示更新のみを呼び出し、Dateオブジェクトを使用して正確な残り時間を計算することをお勧めします。たとえば、ブラウザがビジー状態になった後、タイマーは次の更新後の正しい時刻を示します。

ここに例があります：

HTML：

<div id="timer1"></div>
<div id="timer2"></div>

javascript：

// update all timer
function updateTimer() {
    for (var i in aTimer) {
        var oTimer = document.getElementById(aTimer[i].sId);
        var iSeconds = parseInt((aTimer[i].iFinished - Date.now()) / 1000);
        oTimer.innerHTML = iSeconds;
    }
}

// Init all timers with DOM-id and finish time
var aTimer = [
    { sId: 'timer1', iFinished: Date.now() + 46800000 },
    { sId: 'timer2', iFinished: Date.now() + 780000}
];

// call display update
setInterval(function() {
    updateTimer();
}, 333);
于 2012-11-26T08:18:47.947 に答える
0

setInterval コードは 1000 ミリ秒ごとに正確に実行され、setTimeout は 1000 ミリ秒待機し、数ミリ秒かかる関数を実行してから、別のタイムアウトを設定すると思います。したがって、待機時間は実際には 1000 ミリ秒を超えています。

この投稿から：

setTimeout または setInterval?

于 2012-11-26T07:32:44.913 に答える