Блог

Главная - Вопросы по программированию - setInterval для секундомера

setInterval для секундомера

#javascript #jquery #variables #scope

#javascript #jquery #переменные #область

Вопрос:

Я пытаюсь сделать секундомер. Вот код:

 var min = 0, sec = 0, censec = 0

$("#startBtn").on("click", function() {	// when start button is clicked
	$(this).hide();			// start is hidden
	$("#stopBtn").show();		// stop is shown
	setInterval(add, 10);		// the censec will be increased every 10 millisecond.
	$("#censec").text(censec);
})

function add() {
	censec  ;
	if (censec == 100) {
		censec = 0;
		sec  ;        
		if (sec == 60) {
			sec = 0;
			min  ;
		}
	}    
}

Проблема в том, что это setInterval() происходит только сразу. censec Единственные изменения от 00 до 1 . Вот и все.

PS Я новичок в программировании, поэтому, если есть другие ошибки, пожалуйста, не стесняйтесь сообщать мне.

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

1. Помимо моего ответа, вы также можете проверить пример приветствия, который MS использует для Typescript.

Ответ №1:

setInterval Вызовы обязательно add будут повторяться. Но ваш код показывает значение только censec один раз, когда вы запускаете таймер.

Если вы хотите обновлять отображение каждую сотую долю секунды, введите код, показывающий значение add .

Отдельно код, как он есть в вопросе, вообще не будет выполняться, потому что ReferenceError в первой строке у него есть a . Они ; должны быть , .

Пример (это также сохраняет дескриптор таймера и очищает таймер при нажатии кнопки остановки):

 var min = 0, sec = 0, censec = 0;
// Note ---^--------^

function add() {
  censec  ;
  if (censec == 100) {
    censec = 0;
    sec  ;        
    if (sec == 60) {
      sec = 0;
      min  ;
    }
  }    
  $("#censec").text(censec);
}

var timer = 0;

$("#startBtn").on("click", function() { //when start button is clicked
  $(this).hide();        //start is hidden
  $("#stopBtn").show();  //stop is shown
  timer = setInterval(add,10);   //the censec will be increased every 10 millisecond.
});
$("#stopBtn").on("click", function() {
  clearInterval(timer);
  timer = 0;
  $(this).hide();
  $("#startBtn").show();
}); 
 <input type="button" id="startBtn" value="Start">
<input type="button" id="stopBtn" value="Stop" style="display: none">
<div id="censec"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Обратите внимание, что, хотя он может быть в основном удобен setInterval для отображения, использовать его для отслеживания прошедшего времени — плохая идея; он часто срабатывает не точно.

Вместо этого запишите, когда вы начали

 var start = Date.now();

..а затем, когда сработает таймер, подсчитайте, сколько времени прошло с тех пор, как вы начали

 var elapsed = Date.now() - start;

Затем используйте значение (миллисекунды), elapsed чтобы определить ваш дисплей.

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

1. Первая строка была ошибкой при написании этого вопроса, в исходном коде все было в порядке. Нельзя ли использовать setInterval без clearInterval? Если возможно, объясните код, включающий таймер. Огромное спасибо!

2. @eknoor4197: Да, setInterval можно использовать без clearInterval : таймер никогда не перестанет срабатывать. Но у вас была кнопка «стоп», поэтому я предположил, что вы хотите, чтобы она могла остановиться. Повторите timer код: я думаю, это довольно хорошо объяснено выше. См. Также MDN .

Ответ №2:

Ваши объявления переменных имеют ; вместо , .

Также проверка чисел на равенство должна выполняться с помощью === но проблема здесь не в этом.

Вы также не обновляете представление в своем таймере. Таким образом, обновление вашего html также должно быть в вашей функции, вызываемой таймером.

Если цель состоит в том, чтобы использовать реальные секунды и миллисекунды, я также предлагаю использовать тип даты, потому что ваш таймер будет опаздывать, а не в режиме реального времени. Так что по-прежнему используйте таймер с нужным вам интервалом, но в функции добавления вы вызываете объект date. Вы можете заменить 3 переменных на один datetime типа Date, что даст вам степень детализации, которая вам нравится.

 var dateTimeStart = null, censecElement = null, timer = null;

$("#startBtn").on("click", function() {//when start button is clicked
    $(this).hide();        // start is hidden
    $("#stopBtn").show();  // stop is shown
    if(timer === null) {
        // timer was not started 
        dateTimeStart = new Date();
        timer = setInterval(updateCensec, 10);   //the censec will be increased every 10 millisecond.
        console.log("Started timer");
    }
});

$("#stopBtn").on("click", function() {//when stop button is clicked
    $(this).hide();        // stop is hidden
    $("#startBtn").show();  // start is shown
    if(timer) {
        // timer is started/running
        clearInterval(timer);
        console.log("Stopped timer");
    }
    timer = null;
});

function updateCensec() {
    var sensec = 0, sec = 0, dateTimeNow = new Date(), diffMilliseconds = 0;
    diffMilliseconds = dateTimeNow - dateTimeStart;
    censec = parseInt((diffMilliseconds % 600 ) / 10); // convert milliseconds to centi seconds
    sec = parseInt(diffMilliseconds / 600);
    if(censecElement === null) {
        censecElement = $("#censec");
    }
    censecElement.text(sec   ":"   censec);
}

Я хотел бы предложить вам не обновлять свой вид каждые 10 миллисекунд, даже если вы хотите, чтобы ваш секундомер показывал время в сантисекундах.

Метки: