Javascriptタイマーを一時停止する

Question

このタイマーを一時停止するにはどうすればよいですか？一時停止して一時停止してカウントを続ける方法は？それはあなたが変数にsetIntervalの結果を格納することによってこれを行うことができます機能

function timer($time) { 
 
    let $lorem = $("#lorem"); 
 
    function countdown() { 
 
     let $minutes = Math.floor($time/60); 
 
     let $seconds = $time % 60; 
 
     let $result = $minutes + ":" + ($seconds < 10 ? "0" + $seconds : $seconds); 
 
     --$time; 
 
     $lorem.text($result); 
 
    } 
 
    countdown(); 
 
    setInterval(countdown, 1000); 
 
    } 
 
    timer(200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lorem"></div>

Answer 1

次のようになります。

var timeKeeper = setInterval(countdown, 1000); 

あなたが一時停止したいときに、clearIntervalを使用します。

clearInterval(timeKeeper); 

このwインターバルの実行を停止する。再び開始するには、タイマ変数をリセットします。

timeKeeper= setInterval(countdown, 1000); 

Answer 2

は、クリックtoogleポーズで、クリックイベントでフラグpauseを使用します。

let pause = false; 
    $lorem.on('click', function() { 
    pause = !pause; 
    }); 

その後!pauseと時間> 0は、それまでの時間を短縮かどうかを確認時間< = 0は、間隔を削除する場合は0.1秒

呼び出すだけclearInterval(setInt)

（あなたが let setInt = setInterval(countdown, 100);のようにそれを最初に定義する必要があります注意してください）

一時停止時に精度が向上するため100msを使用します。それ以外の場合はクリック後もクロックは次の秒に実行され、停止します。

!pauseの場合は、$time = $time - 0.1;を続行します。それ以外の場合は、同じ時間を保ち、次の通話にパスします。

function timer($time) { 
 
    let $lorem = $("#lorem"); 
 
    let pause = false; 
 
    let setInt = setInterval(countdown, 100); 
 
    $('#pause').on('click', function() { 
 
    pause = !pause; 
 
    }); 
 

 
    function countdown() { 
 
    if (!pause && $time > 0) { 
 
     $time = ($time - 0.1).toFixed(1); 
 
    } 
 
    if($time <= 0){ 
 
     clearInterval(setInt); 
 
    } 
 

 
    let $minutes = Math.floor($time/60); 
 
    let $seconds = Math.ceil($time % 60); 
 
    let $result = $minutes + ":" + ($seconds < 10 ? "0" + $seconds : $seconds); 
 

 
    $lorem.text($result); 
 
    console.log($time); 
 
    } 
 

 
} 
 
timer(3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lorem"></div> 
 

 
<br> 
 
<button id="pause">Pause</button>