Как уничтожить предыдущий раз в скрипте Coming Soon?

Question

Я создал функцию Скоро (пример здесь: https://www.w3schools.com/howto/howto_css_coming_soon.asp). У меня есть две страницы, которые загружаются через AJAX и использую эту функцию для обратного отсчета до указанного времени. У каждой страницы своя дата. Проблема в том, что когда я go перехожу на следующую страницу, предыдущий обратный отсчет не уничтожается, и на текущей странице отображается текущий обратный отсчет, а затем предварительный отсчет (в одну секунду). Я понимаю, что предыдущий таймер не был уничтожен, поэтому два работают одновременно.

Как удалить предыдущие данные, таймер обратного отсчета?

/* Coming Soon */
function comingSoonInit() {
   if ($('.coming-soon-time').length) {
      var comingSoonTime = $('.coming-soon-timer').data('coming-soon-time');

      // Set the date we're counting down to
      var countDownDate = new Date(comingSoonTime).getTime();

      // Update the count down every 1 second
      var x = setInterval(function () {

         // Get todays date and time
         var now = new Date().getTime();

         // Find the distance between now an the count down date
         var distance = countDownDate - now;

         // Time calculations for days, hours, minutes and seconds
         var days = Math.floor(distance / (1000 * 60 * 60 * 24));
         var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
         var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
         var seconds = Math.floor((distance % (1000 * 60)) / 1000);

         $('#coming-soon-days').text(days);
         $('#coming-soon-hours').text(hours);
         $('#coming-soon-minutes').text(minutes);
         $('#coming-soon-seconds').text(seconds);

         // If the count down is finished, write some text
         if (distance < 0) {
            clearInterval(x);
            $('.coming-soon-timer').addClass('is-end');
            $('.event-time').addClass('is-active');
         }
      }, 1000);
   }
}

Answer 1

Когда вы создаете «интервал» с помощью функции setInterval, эта функция возвращает уникальное числовое значение, которое является идентификатором созданного интервала. Этот идентификатор важен, потому что он используется для отмены интервала позже, когда это необходимо.

Поэтому вы должны сохранить идентификатор вашего первого интервала:

var idInterval = setInterval(...); // Make sure you can use this value later

И позже, когда вы будете sh создавать новое «скоро», вы должны прекратить предыдущий интервал, используя функцию clearInterval:

clearInterval(idInterval);