7

特定の終了時刻に関してカウントダウン時計を表示しています。

完璧に機能していますが、どの方法を適用するのが最善かを知りたいです。

以下は私のカウントダウン機能です。 

  var timerId;
  var postData = {endDate : endDate, tz : tz};  
  var countdown = function()
    { 
      $.ajax({
               type : 'post',
               async : false,
               timeout : 1000,
               url : './ajax_countdown.php',
               data : $.param(postData),
               dataType : 'json',
               success : function (resp){
                  $('#currentTime').html(resp.remainingTime);
               }
            }); 
     }

私が欲しいのは、関数（カウントダウン）が1秒ごとに自動的に呼び出され、1秒以内に実行/完了しない場合は、現在のajaxをキャンセルして新しいajax呼び出しを開始することです。

今、私は4つの作業方法があることを発見しました

方法 1: windowオブジェクトで setInterval() を使用する

window.setInterval(countdown, 1000);

方法 2 : setInterval()を個別に使用する

setInterval(function() {countdown()}, 1000);

メソッド 3 :関数内でsetTimeOutを使用し、他の関数を呼び出してメイン関数を初期化する

var countdown = function() { 
     $.ajax({ //ajax code });
     timerId = setTimeout(countdown, 5000); // assign to a variable
 }

function clockStart() {  
        if (timerId) return
        countdown();
}
clockStart(); // calling this function

方法 4 :無名関数呼び出しを使用する

var countdown = function() { 
     $.ajax({ //ajax code });
     timerId = setTimeout(countdown, 5000);
 }
  (function(){
         if (timerId) return;
         countdown();
})();

教えてください

  • 各方法の長所と短所は何ですか?また、どの方法が最適/正しい方法ですか?
  • またはを使用する必要がありますclearTimeOut()かclearInterval()？

参考文献

http://javascript.info/tutorial/settimeout-setinterval

60 秒ごとに関数を呼び出す

http://www.electrictoolbox.com/using-settimeout-javascript/

4

3 に答える 3

8

私はあなたの方法を使用しません。その理由は、指定された delay の後にコードが実行されることを保証するものではsetTimeoutありsetInterval ません。これは、JavaScript がシングル スレッドであるためです。

指定された遅延の後に一度だけ関数を呼び出す必要がある場合は、 を使用しますsetTimeout。ただし、一定の時間間隔の後に関数を呼び出す必要がある場合は、使用しませんsetInterval。代わりに、デルタ タイミングを利用します。コードは次のとおりです。

デルタ タイミングを使用する利点は、指定した一定の時間間隔により近くコードが実行されることです。それは自分自身を修正します。デルタ タイマーの作成と使用は簡単です。たとえば、コードは次のように記述されます。

var timer = new DeltaTimer(function (time) {
    $.ajax({
        // properties
    });

    if (time - start >= 5000) timer.stop();
}, 1000);

var start = timer.start();

上記のデルタ タイマーはsetInterval(方法 1) よりも優れており、setTimeout(方法 2) を利用するだけでなく、それ自体を修正し、関数を使用してタイマーを開始し (方法 3)、特別なclockStart関数でスコープを汚染しません (方法 4) 。 .

さらに、関数が呼び出された時刻が引数として関数に渡されるため、タイマーの開始後に関数が呼び出された正確な時刻を簡単に取得できます。stopタイマーには、タイマーを停止するメソッドもあります。もう一度開始するには、もう一度呼び出しますstart。

編集：

DeltaTimerより似たものにしたいsetInterval(タイマーを自動的に開始する) 場合は、次のように spawn 関数を実装できます。

DeltaTimer.spawn = function (render, interval) {
    var timer = new DeltaTimer(render, interval);

    var start = timer.start = function (start) {
        return function () {
            render.start = start();
        };
    }(timer.start);

    start();

    return timer;
};

DeltaTimer次に、次のように を自動的に作成して開始することができます。

var timer = DeltaTimer.spawn(function countdown(time) {
    $.ajax({
        // properties
    });

    if (time - countdown.start >= 5000) timer.stop();
}, 1000);

したがって、var timer = DeltaTimer.spawn(funct, delay);と同等でvar interval = setInterval(funct, delay);あり、timer.stop();と同等clearInterval(interval);です。自動化できるのはそれくらいだと思います。

于 2012-07-17T11:18:41.923 に答える
6

#2 よりも #1 を使用する利点は、window参照によってスコープ変数が上書きされる可能性がなくなることsetIntervalです。

// When out of global scope...
function setInterval() {

}

window.setInterval(foo, 100); // still calls the "correct" setInterval

への呼び出しを関数にラップすることに違いはありませんcountdown(#1、#2)。＃2は、他の関数を呼び出したり、引数を渡したりすることもできるため、柔軟性が高くなります（ただし、これが事実になった場合、＃1から＃2に交換するのは明らかに簡単です）。

＃4は関数を宣言する必要がありませんclockStart。それ以外は＃3と同じです。

を使用したclearTimeout場合は使用setTimeoutし、使用したclearInterval場合はsetInterval...

setTimeoutまた、異なる方法でsetInterval作業することにも注意する必要があります。それを説明する驚くべき答えがここにあります...

私が使うものは？私は＃2を使用します。

于 2012-07-17T10:51:59.353 に答える
-1

カウントダウンを作成している場合、jquery プラグインを使用せず、要件に応じてカスタマイズするのはなぜですか? ここでチェックアウト

http://www.tripwiremagazine.com/2012/05/jquery-countdown-scripts.html

于 2012-07-17T11:09:01.710 に答える