0

1 つの Web ページで無制限のカウントダウン タイマーをユーザーに提供できる可能性のあるアプリケーションを構築しています。各タイマーは、互いに独立するように設計されています。たとえば、タイマー A をクリックすると 10 分カウントダウンし、タイマー B をクリックすると 2 時間カウントダウンします。任意のタイマーは、クリックするだけでいつでもキャンセルできます (タイマーは基本的に html ボタンです) 私は Javascript の window.setInterval() を使用して毎秒カウントダウンしています

function initTimer()
{
    window.clearInterval(myTimer);
    myTimer = window.setInterval(function (){Countdown()}, 1000);
}

私のカウントダウン関数は次のようになります:

function Countdown()
{
 if (((intCurrentTime == intEndTime) || (intCurrentTime > intEndTime))||(blnIsAbort == true))
     {
        isActive=false;
        Toggle(btnID, intButtonType, intCurrentTime, intTimeDelay,blnIsAbort); //toggles the button state
        clearInterval(myTimer);
     }
     else
     {
        isActive=true;
        intCurrentTime++;
        UpdateTimer((intEndTime - intCurrentTime), btnID);
     }
}

intCurrentTime は現在のサーバー時間です。intEndTime は SQL DB から取得されます。blnIsAbort は、ユーザーがタイマーを終了することを決定したときに true になります。(blnIsAbort=true)

1.) 今私が抱えている最初の問題は、Web ページを更新すると clearInterval(myTimer); が発生することです。動作していないようです代わりに、1 つのボタンで 2 つのタイマーを実行しています。(ページの読み込み時とボタンがクリックされたときに initTimer() を呼び出します)。

2.) タイマーをキャンセルしようとすると、ボタン A をクリックするとボタン B のタイマーもクリアされ、2 番目の問題が発生します。

これらの問題を回避するための助けをいただければ幸いです。おそらく、これを行うことができるより効率的な方法がありますか?

4

1 に答える 1

0

このようなことを達成しようとしていますか: http://jsfiddle.net/zVMaQ/1/

  1. ここでは、単純なCountDownTimerクラスを作成しました。
  2. 使用する代わりに、より正確にするためにsetInterval使用しました。setTimeout
  3. タイマーごとに複数のタイムアウトではなく、単一のタイムアウトを作成しました。
  4. タイマーのクリアは、タイマーtickメソッドをリセットするのと同じくらい簡単です。
  5. タイマー クラスを構築するためにjavascript/augmentを使用しました。

ニーズに合わせて簡単に変更できます。

于 2013-01-08T03:00:11.073 に答える