setInterval inside .each() only working for last interval?

Question

Goal:

Im looping through several .event elements using jQuery's each function. I am calculating a timer countdown using information coming from hidden span elements inside each .event class. I am using setInterval() to recalculate the remaining time every second.

Problem:

All my calculations work perfectly – but only for the last interval. Each interval seems to overwrite the calculation from the one before. Meaning: only the last .event is even getting an output. All previous .event are not even getting any output. Using logs before and after the interval, I was able to narrow my error down to the setInterval function. How can I prevent each interval from overwriting the one before? Or is my error somewhere I did not even think of yet?

Code:

$('.event').each(function() {
    $event = $(this);

    // SET FUTURE DATE
    $futureDate = $event.find($('.event-time'));
    $countdownDate = new Date($futureDate.text()).getTime();

    setInterval(function() {
    
        // SET TODAYS DATE
        $now = new Date().getTime();
    
        // DIFFERENCE NOW AND FUTURE DATE
        $diff = $countdownDate - $now;
    
        // TIME CALCULATIONS FOR d, h, m, s
        $days = Math.floor($diff / (1000 * 60 * 60 * 24));
        $hours = Math.floor(($diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        $minutes = Math.floor(($diff % (1000 * 60 * 60)) / (1000 * 60));
        $seconds = Math.floor(($diff % (1000 * 60)) / 1000);
    
        // OUTPUT
        $event.find('.clock .val-d').html($days);
        $event.find('.clock .val-h').html($hours);
        $event.find('.clock .val-m').html($minutes);
        $event.find('.clock .val-s').html($seconds);
    
    }, 1000)
});

score 5 · Accepted Answer · answered Jul 27 '20 at 09:36

The problem is because when the function within your interval runs the loop has finished, so $event will only ever refer to the last .event element in the jQuery object.

The simple fix for this, assuming you can use ES6, is to use the let keyword to define the $event:

$('.event').each(function() {
  let $event = $(this);

  // the rest of your code...
});

If you can't use ES6 then you'll need to use a closure to retain the scope of $(this):

$('.event').each(function() {
  (function($event) {
    $futureDate = $event.find($('.event-time'));
    $countdownDate = new Date($futureDate.text()).getTime();

    setInterval(function() {
      $now = new Date().getTime();
      $diff = $countdownDate - $now;

      // TIME CALCULATIONS FOR d, h, m, s
      $days = Math.floor($diff / (1000 * 60 * 60 * 24));
      $hours = Math.floor(($diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      $minutes = Math.floor(($diff % (1000 * 60 * 60)) / (1000 * 60));
      $seconds = Math.floor(($diff % (1000 * 60)) / 1000);

      $event.find('.clock .val-d').html($days);
      $event.find('.clock .val-h').html($hours);
      $event.find('.clock .val-m').html($minutes);
      $event.find('.clock .val-s').html($seconds);
    }, 1000)
  })($(this));
});

Using your second approach, all .event now get an ouput – but all get the same timer. Each .event has an own countdown timer and should therefore get his own outputs. What am I missing? — Sandro, Jul 27 '20 at 09:44
If you can't use ES6, can't you simply use `var $event = $(this);` instead? — Ivar, Jul 27 '20 at 09:44
@Ivar this actually did gave me the same result, yes. But still, every .event gets the same countdown timer, not its individual — Sandro, Jul 27 '20 at 09:49
@Sandro Add `var` in front of `$futureDate` and `$countdownDate` as well. You should (with some exceptions) always declare your variables using `var`/`let`/`const`. If you don't, they become global variables which can cause issues like these. — Ivar, Jul 27 '20 at 09:59

setInterval inside .each() only working for last interval?

1 Answers1