Блог

Главная - Вопросы по программированию - Как остановить таймер при определенном значении

Как остановить таймер при определенном значении

#javascript #html

#javascript #HTML

Вопрос:

Я создал таймер, который запускается при нажатии кнопки. Я хочу, чтобы таймер останавливался, когда значение time достигает 5, но по какой-то причине он не работает.

 let words = document.getElementById("Words");
let wordAr = ["The" , "quick" , "brown" , "fox" , "jumped" , "over" , "the" , "lazy" , "dog"];
let textIn = document.getElementById("Input");
let timer = 0;
let time = document.getElementById("Timer");
let wPM = 0;
let wpm = document.getElementById("WPM");
let text = document.getElementById("text");

words.innerHTML = wordAr.slice(0,9).join(" ");

window.addEventListener("keydown", function(key){
	if(key.keyCode == 32){
		for (let i=0; i < 1; i  ){
			wPM =1;
			wpm.innerHTML = wPM;	
		};
	};
});

let start = document.getElementById("start");

function incTime(){
	timer  ;
	time.innerHTML = timer;
};	

function initTime(){
	setInterval(incTime, 1000);
};

if(timer == 5){
	console.log("done");
};

Я пытался добавлять .value и использовать одинарные равенства и тройные равенства, но все попытки тщетны.

Комментарии:

1. Вы должны проверить if(timer == 5) внутри initTime()

2. Не уверен, но внутри функции incTime должен быть оператор If?

3. Я только что попробовал это, и это не сработало, я даже пытался обновить страницу!!

4. Это работает, когда я его вставляю incTime спасибо, ребята

5. да, это работает, когда вы устанавливаете проверку внутри incTime() но из-за причины, которую вы используете setInterval() , он будет продолжать работать через каждые секунды.

Ответ №1:

Добавьте условие таймера с помощью incTime() функции.И используйте clearInterval() для прерывания setInterval 

 var timer = 0;

function incTime() {
  timer  ;
  console.log(timer);
  if (timer == 5) {
    clearInterval(time_int);
    console.log('breaked')
  };
};
var time_int = '';

function initTime() {
  time_int = setInterval(incTime, 1000);
};
initTime()

Ответ №2:

Проблема в вашем случае заключается в том, что проверка (timer == 5) выполняется только один раз и не проверяется при каждом обновлении значения таймера. Вам нужно проверять значение таймера каждый раз, когда оно обновляется. переместив проверку внутри метода обновления incTime()

 let words = document.getElementById("Words");
let wordAr = ["The" , "quick" , "brown" , "fox" , "jumped" , "over" , "the" , "lazy" , "dog"];
let textIn = document.getElementById("Input");
let timer = 0;
let time = document.getElementById("Timer");
let wPM = 0;
let wpm = document.getElementById("WPM");
let text = document.getElementById("text");

words.innerHTML = wordAr.slice(0,9).join(" ");

window.addEventListener("keydown", function(key){
    if(key.keyCode == 32){
        for (let i=0; i < 1; i  ){
            wPM =1;
            wpm.innerHTML = wPM;    
        };
    };
});

let start = document.getElementById("start");

function incTime(){
    timer  ;
    time.innerHTML = timer;
    if(timer == 5){
        console.log("done");
    }
};  

function initTime(){
    setInterval(incTime, 1000);
};

Ответ №3:

Вы могли бы использовать clearInterval() метод.

В вашем случае:

 let words = document.getElementById("Words");
let wordAr = ["The" , "quick" , "brown" , "fox" , "jumped" , "over" , "the" , "lazy" , "dog"];
let textIn = document.getElementById("Input");
let timer = 0;
let time = document.getElementById("Timer");
let wPM = 0;
let wpm = document.getElementById("WPM");
let text = document.getElementById("text");
let timerPid= null;

words.innerHTML = wordAr.slice(0,9).join(" ");

window.addEventListener("keydown", function(key){
    if(key.keyCode == 32){
        for (let i=0; i < 1; i  ){
            wPM =1;
            wpm.innerHTML = wPM;    
        };
    };
});

let start = document.getElementById("start");

function incTime(){
    timer  ;
    time.innerHTML = timer;
};  

function initTime(){
    timerPid= setInterval(incTime, 1000);
};

if(timer == 5){
    clearInterval(timerPid);
};