Повышение качества и эффективности кода таймера обратного отсчета - PullRequest
Новая
       1

Повышение качества и эффективности кода таймера обратного отсчета

0 голосов
/ 16 мая 2019

Я довольно новичок в Javascript и HTML, поэтому я думаю, что есть гораздо лучший способ сделать это.

Ситуация:
У меня есть массив длительностей времени var TimeArray =[65,10,35];
Я хочу создать таймер, который запускается каждый из этих времен в последовательности. то есть. Как только прошло 65 минут, таймер должен работать 10 минут. Затем, через 10 минут, бегите 35 минут.

Моя первоначальная идея заключалась в том, чтобы поместить setInterval в цикл For , однако вскоре я понял, что это не сработало, поскольку цикл for просто продолжал обновляться и не ожидал setInterval для завершения.

Поэтому я создал следующий алгоритм рекурсии как обходной путь, выкручивая цикл for и создавая глобальную переменную var section, которая увеличивается в конце каждого вызова алгоритма. 

var TimeArray =[65,10,35];
var section = 0;

    function StartTimer(){
      if (section < TimeArray.length){
        var deadline = new Date();
        deadline.setMinutes(deadline.getMinutes() + TimeArray[section]);
        var x = setInterval(function() {
        var now = new Date().getTime();
        var t = deadline - now;
        var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
        var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((t % (1000 * 60)) / 1000);
       document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
          if (t < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
            section++;
            StartTimer();
          }
        }, 1000);
      }
      else{
        return;
      }
    }

Алгоритм работает именно так, как я хочу, но мне действительно не нравится тот факт, что мне пришлось использовать рекурсию. Я не хочу, чтобы это продолжало добавлять в стек памяти. Есть ли способ использовать итерацию и сохранить функциональность?

Спасибо!

...