Функция таймера, которая останавливается, когда время <= 0 - PullRequest
Новая
       0

Функция таймера, которая останавливается, когда время <= 0

0 голосов
/ 09 января 2019

Я пытаюсь создать таймер, который автоматически останавливается на 0. Прямо сейчас я могу запускать и останавливать таймер с помощью кнопок, но я пытаюсь внедрить функцию таймера в игру, поэтому он должен остановиться на 0. 

let x;
let time = 15;
// let x = setTimeout(function(){ timer(); }, 1000);

let timer = function() {
    x = setInterval(function() {
        time -= 1
        document.getElementById("timer").innerHTML = time + " seconds";
    }, 1000)
}

let stopTimer = function() {
    clearTimeout(x)
}



$("#start").click(function(){
 	timer()
 })

$("#stop").click(function(){
 	stopTimer()
 })
<!DOCTYPE html>
<html>
<head>
	<title>Timer</title>
</head>
<body>
	<h1>Timer</h1>
	<p id="timer"></span></p>
	<h2><button id="start">Start Timer</button></h2>
	<h3><button id="stop">Stop Timer</button></h3>

	
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="app2.js"></script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Посмотрите на clearInterval , способ остановить setInterval, который вы уже начали. Смотрите мою отредактированную версию вашего примера ниже. 

let x;
let time = 15;
// let x = setTimeout(function(){ timer(); }, 1000);

let timer = function() {
    x = setInterval(function() {
        time -= 1
        document.getElementById("timer").innerHTML = time + " seconds";
        if (time == 0) {
            stopTimer();
        }
    }, 1000)
}

let stopTimer = function() {
    clearInterval(x)
}



$("#start").click(function(){
 	timer()
 })

$("#stop").click(function(){
 	stopTimer()
 })
<!DOCTYPE html>
<html>
<head>
	<title>Timer</title>
</head>
<body>
	<h1>Timer</h1>
	<p id="timer"></span></p>
	<h2><button id="start">Start Timer</button></h2>
	<h3><button id="stop">Stop Timer</button></h3>

	
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="app2.js"></script>
</body>
</html>
0 голосов
/ 09 января 2019

Я добавил 

if(time == 0){
    stopTimer();
 }

чтобы проверить, когда он достигнет 0, а затем вызывает стоп:) 

let x;
let time = 15;
// let x = setTimeout(function(){ timer(); }, 1000);

let timer = function() {
    x = setInterval(function() {
        time -= 1
        document.getElementById("timer").innerHTML = time + " seconds";
        if(time == 0){
            stopTimer();
          }
    }, 1000)
}

let stopTimer = function() {
    clearTimeout(x)
}



$("#start").click(function(){
 	timer()
 })

$("#stop").click(function(){
 	stopTimer()
 })
<!DOCTYPE html>
<html>
<head>
	<title>Timer</title>
</head>
<body>
	<h1>Timer</h1>
	<p id="timer"></span></p>
	<h2><button id="start">Start Timer</button></h2>
	<h3><button id="stop">Stop Timer</button></h3>

	
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="app2.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...