자바 스크립트 타이머 일시 중지

Question

이 타이머를 일시 중지하는 방법은 무엇입니까? 다시 일시 중지하고 계속 계산하는 방법이 일시 중지 된 경우 일시 중지 할 때

var timeKeeper = setInterval(countdown, 1000); 

그런 다음, clearInterval을 사용합니다 : 그것은

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

당신은 변수에 setInterval의 결과를 저장하여이 작업을 수행 할 수있는 기능을해야

clearInterval(timeKeeper); 

이 w 간격 실행을 중지하십시오. 클릭 켜고 끌 일시 정지에,

timeKeeper= setInterval(countdown, 1000); 

Answer 2

는 클릭 이벤트와 플래그 pause를 사용 : 다시 시작하려면 타이머 변수를 재설정 !pause와 시간> 0 그때까지 시간을 줄일 경우

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

그런 다음 확인 시간 < = 0 간격을 제거 할 경우 0.1 초

단지 전화 clearInterval(setInt)

012,351 (당신이 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>