Остановка таймера в DOM-элементе

05 сентября 2021, 18:40

Есть код таймера на JS:

var interval;
    function StartNewTimerFunction(el) {
   var time = el.innerHTML;
   if((time.valueOf()!= "") & (time.valueOf()!= "закончен") & (time.valueOf()!= "закінчено")) {
       var arr = time.split(":");
       var minutes = arr[0];
       var seconds = arr[1];
   // Set the timer
   interval = setInterval(function() {
      if(seconds == 0) {
         if(minutes == 0) {
           (el.innerHTML = "закончен");
           clearInterval(interval);
           return;
         } else {
           minutes--;
               if (minutes < 10) minutes = "0" + minutes;
                   seconds = 60;
               }
           }
           seconds--;
               if (seconds < 10) seconds = "0" + seconds;
                  el.innerHTML = minutes+":"+seconds;
               }, 1000);
      }
      else return;
}

Остановка таймера:

function StopActiveTimerFunction() {
    clearInterval(interval);
}

Код запуска таймера в нужном количестве однотипных заявок - у каждой свой блок DIV для таймера:

function startTimer(class_Name) {
   var my_timer = document.getElementsByClassName(class_Name);
       for(var x = 0; x < my_timer.length; x++) {
           countdown(my_timer[x]);
       }
}

ajax-запрос (обработка формы):

   function set_bet_in_auction(element) {
            var form = $(element);
            var formForResponse = element;
            $.ajax({
                type: "POST",
                url: "/set-price-in-auction/",
                data: form.serialize(),
                success: function (data) {
                    *..... тут разные проверки данных и т.д....*
                    price_div.innerHTML = data.setPrice;
                    price_div.style.color = "red";
                    price_top_div.style.backgroundImage = image_key_horizontal;
                    add_executor_info_flag(centralpart_div, 
 data.executorNickname, data.executorRate);
                    price_bottom_div.style.background = button_auction;
                    set_price_popup.style.display = "none";
                    price_timer_div.innerHTML = "60:00";
                    StopActiveTimerFunction();
                    StartNewTimerFunction(price_timer_div);
                    price_timer_div.style.visibility = "visible";
                }
            },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        },
    });

Div-элементы с таймером однотипны - список заявок, но в каждой свой отдельный таймер, который стартует с значением, полученным из БД в формате "60:00". В данном контексте все работает.

Функционал приложения предусматривает периодическое обновление таймера в отдельно взятой заявке действием пользователя. Обновление проводится через AJAX, то есть без перезагрузки страницы.

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

Функция clearInterval(interval); работает для одного конкретного таймера, но если их много, останавливает все сразу, а не конкретно нужный мне. Вопрос в том, можно ли каким-нибудь образом записать таймер в переменную и прикрепить к блоку div, чтобы затем его из этого же блока достать и остановить?

Answer 1

//var interval;
function StartNewTimerFunction(el) {
  var time = el.innerHTML;
  if((time.valueOf()!= "") & (time.valueOf()!= "закончен") & (time.valueOf()!= "закінчено")) {
    var arr = time.split(":");
    var minutes = arr[0];
    var seconds = arr[1];
    StopActiveTimerFunction(el);
    // Set the timer
    el.interval = setInterval(function() {
      ...
    }, 1000);
}
function StopActiveTimerFunction(el) {
  el.interval = clearInterval(el.interval);
}