Таймер на JS работает не корректно при обновлении дива почему?

Question

[gomer1726]

Хочу сделать таймер обратного отсчета для теста то есть когда время вышло нужно пропустить вопрос
Нашел скрипт

<script type="text/javascript">
  function startTimer() {
    var my_timer = document.getElementById("my_timer");
    var time = my_timer.innerHTML;
    var arr = time.split(":");
    var h = arr[0];
    var m = arr[1];
    var s = arr[2];
    if (s == 0) {
      if (m == 0) {
        if (h == 0) {
          Здесь срабатывает функция которая меняет вопросы теста
        }
        h--;
        m = 60;
        if (h < 10) h = "0" + h;
      }
      m--;
      if (m < 10) m = "0" + m;
      s = 59;
    }
    else s--;
    if (s < 10) s = "0" + s;
    document.getElementById("my_timer").innerHTML = h+":"+m+":"+s;
    setTimeout(startTimer, 1000);
  }
</script>
<p><span id="my_timer" style="color: #f00; font-size: 150%; font-weight: bold;">01:10:00</span></p>

Все бы хорошо, но дело в том что у меня вопросы сменяются с помощью аякса. И вот тогда этот счетчик начинает вести себя не адекватно)
То есть когда время вышло и появляется новый вопрос то как будто там есть 2 счетчика между собой борются то появляется один то другой.
А если обновить страницу то все норм
Помогите пожалуйста

Answer 1

[Stalker_RED]

У вас setTimeout в конце каждого цикла вызывает новый setTimeout. Вы можете заменить это на один вызов setInterval(), например.

Или можно сохранить идентификатор таймера
var foo = setTimeout(startTimer, 1000);
И потом сбросить его
clearTimeout(foo)

Comments

[gomer1726]

Где именно сбрасывать, идентификатор таймера получается только внутри функции а например при других событиях просто нельзя сбросить таймер

[Stalker_RED]

gomer1726: можно. Просто вынесите идентификатор из функции.

Answer 2

[Islam Ibakaev]

думаю так будет чуток лучше

const timer = document.getElementById("my_timer");


// выбери "время в секундах" или число вызовов функции startTimer() 
let total = 60;

// сохраним в переменную, чтобы потом очистить
let timerInterval = setInterval(tick, 1000);

// достаём число, минуты, секунды в числовом формате
const getHours = x => Math.floor( total / 3600 )
const getMinutes = x => Math.floor( total % 3600 / 60)
const getSeconds = x => Math.floor( total % 3600 % 60 )

// приводим вышеуказанные значения в нужный для отображения вид
const prepair = val => val < 10 ? '0' + val : val

// эта функция принимает фукцию и вызывает её, передав в качестве аргумента total
const passTotal = fn => fn(total);


function tick() {
	// типа делаем [a, b] = [10, 20] и получаем a = 10 и b = 20 (деструктивное присваивание)
	const [hour, minutes, seconds] = [getHours, getMinutes, getSeconds].map(passTotal)
	
	if (total <= 0) {
		clearInterval(timerInterval)
		// return fetchAnotherQuestion()
	}
		// отображаем строку
   timer.textContent = prepair(hour)+ ':' + prepair(minutes) + ':' + prepair(seconds)
   
	 // уменьшаем "время в секундах" на "одну секунду"
	 total--;
}