Как остановить обратный отсчет javascript, нажав кнопку?

Question

У меня есть кнопка запуска для моего обратного отсчета, но я хочу, чтобы она остановилась, когда я нажимаю кнопку остановки.

мой HTML код:

<div> 
    <span id="timer">25:00</span> 
</div> 

Start Stop

мой JS код:

$('#startTimerButton').click(function starter() { 

      function startTimer(duration, display) { 
       var timer = duration, minutes, seconds; 
       setInterval(function() { 
        minutes = parseInt(timer/60, 10); 
        seconds = parseInt(timer % 60, 10); 

        minutes = minutes < 10 ? "0" + minutes : minutes; 
        seconds = seconds < 10 ? "0" + seconds : seconds; 

        display.text(minutes + ":" + seconds); 

        if (--timer < 0) { 
         timer = duration; 
        } 

       }, 1000); 
      } 

      jQuery(function ($) { 
       var fiveMinutes = 60 * 25, 
        display = $('#timer'); 
       startTimer(fiveMinutes, display); 
      }); 


    }); 

Answer 1

подключить функцию с переменной, как это: (Попробуйте без 'вар')

var my_timer = setInterval(function() { ... 

И остановить таймер с этой функцией:

$("#stop_btn").click(function(){ 
    clearInterval(my_timer); 
}); 

Answer 2

Вам нужно очистить интервал при нажатии кнопки. Предположим, что кнопка для остановки - #stopTimerButton. Затем измените свои js на:

$('#startTimerButton').click(function starter() { 

     function startTimer(duration, display) { 
      var timer = duration, minutes, seconds; 
      interval = setInterval(function() { 
       minutes = parseInt(timer/60, 10); 
       seconds = parseInt(timer % 60, 10); 

       minutes = minutes < 10 ? "0" + minutes : minutes; 
       seconds = seconds < 10 ? "0" + seconds : seconds; 

       display.text(minutes + ":" + seconds); 

       if (--timer < 0) { 
        timer = duration; 
       } 

      }, 1000); 
     } 

     jQuery(function ($) { 
      var fiveMinutes = 60 * 25, 
       display = $('#timer'); 
      startTimer(fiveMinutes, display); 
     }); 


}); 
$('#stopTimerButton').click(function() { 
    clearInterval(interval); 
}); 

Answer 3

Чтобы остановить таймер, вам необходимо использовать функцию clearInterval.

$(document).ready(function() { 
var handler; 

$('#stopTimerButton').click(function() { 
    if (handler) { 
     clearInterval(handler); 
    } 
}); 

$('#startTimerButton').click(function starter() { 

      function startTimer(duration, display) { 
       var timer = duration, minutes, seconds; 
       handler = setInterval(function() { 
        minutes = parseInt(timer/60, 10); 
        seconds = parseInt(timer % 60, 10); 

        minutes = minutes < 10 ? "0" + minutes : minutes; 
        seconds = seconds < 10 ? "0" + seconds : seconds; 

        display.text(minutes + ":" + seconds); 

        if (--timer < 0) { 
         timer = duration; 
        } 

       }, 1000); 
      } 

      jQuery(function ($) { 
       var fiveMinutes = 60 * 25, 
        display = $('#timer'); 
       startTimer(fiveMinutes, display); 
      }); 
    }); 
}); 

Answer 4

Во-первых, попытаться вернуть интервал в функции:

function startTimer(duration, display) { 
    var timer = duration, minutes, seconds; 
    timeInterval = setInterval(function() { 
     minutes = parseInt(timer/60, 10); 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.text(minutes + ":" + seconds); 

     if (--timer < 0) { 
      timer = duration; 
     } 

    }, 1000); 
    return timeInterval; 
} 

Затем, вызов этой функции присвоить его переменной, так что вы можете очистить его позже:

var countTimeInterval = startTimer(); 
clearInterval(countTimeInterval);