Weird setInterval issue in a countdown project

Question

I was writing a project while watching a tutorial (like, listening to what I have to do, and then doing it on my own trying to see if I manage to make it work). This is the code:

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];
const weekdays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

const deadline = document.querySelector(".deadline");
const giveaway = document.querySelector(".giveaway");
const h4 = document.querySelectorAll(".deadline-format h4");

let futureDate = new Date(2022, 4, 17, 11, 30, 0);

const yearTime = futureDate.getFullYear();
const monthTime = futureDate.getMonth();
const dayTime = futureDate.getDay();
const dateTime = futureDate.getDate();
const hourTime = futureDate.getHours();
const minutesTime = futureDate.getMinutes();

giveaway.innerHTML = ` Giveaway ends on ${weekdays[dayTime]}, ${dateTime} ${months[monthTime]} ${yearTime}, ${hourTime}:${minutesTime}am`;

const futureTime = futureDate.getTime();
const currentTime = new Date().getTime();

let getRemainingTime = () => {

  const timeLeft = futureTime - currentTime;

  const oneDay = 24 * 60 * 60 * 1000;
  const oneHour = 60 * 60 * 1000;
  const oneMinute = 60 * 1000;
  const oneSecond = 1000;
  let days = Math.floor(timeLeft / oneDay);
  let hours = Math.floor((timeLeft % oneDay) / oneHour);
  let mins = Math.floor(((timeLeft % oneDay) % oneHour) / oneMinute);
  let secs = Math.floor(
    (((timeLeft % oneDay) % oneHour) % oneMinute) / oneSecond
  );
 
  const values = [days, hours, mins, secs];

  let zeroBefore = (item) => {
    if (item < 10) {
      return (item = `0${item}`);
    } else {
      return item;
    }
  };

  h4.forEach((item, index) => {
    item.innerHTML = zeroBefore(values[index]);
  });
};

// countdown
let countdown = setInterval(getRemainingTime, 1000);
//set initial values
getRemainingTime();

The issue comes before the start of the function:

const futureTime = futureDate.getTime();
const currentTime = currentDate.getTime();

let getRemainingTime = () => {
const timeLeft = futureTime - currentTime;

  const oneDay = 24 * 60 * 60 * 1000;
  const oneHour = 60 * 60 * 1000;
  const oneMinute = 60 * 1000;
  const oneSecond = 1000;
  let days = Math.floor(timeLeft / oneDay);
  let hours = Math.floor((timeLeft % oneDay) / oneHour);
  let mins = Math.floor(((timeLeft % oneDay) % oneHour) / oneMinute);
  let secs = Math.floor(
    (((timeLeft % oneDay) % oneHour) % oneMinute) / oneSecond
  );
  const values = [days, hours, mins, secs];

  let zeroBefore = (item) => {
    if (item < 10) {
      return (item = `0${item}`);
    } else {
      return item;
    }
  };

  h4.forEach((item, index) => {
    item.innerHTML = zeroBefore(values[index]);
  });

Basically, the problem is that the variable "currentTime" is out of the function, and so the live page doesn't update every second for some reason. If, instead, I put "currentTime" in the function, it suddenly works. Why is it so? Why do I need to put in the function the variable "currentTime" while I don't need to put in the function the variable "futureTime", which has the same use of "currentTime" in my function? Thanks, and sorry if I did something wrong, that's my first post on this site!

Answer 1

I'm not sure I'd describe what you're seeing as weird. It seems perfectly explainable to me.

If you declare currentTime outside your function, i.e.

const currentTime = new Date().getTime();

let getRemainingTime = () => {
  const timeLeft = futureTime - currentTime;
  ...
};

then currentTime is evaluated once when your script loads. Every time you call getRemainingTime(), currentTime has the same value, so your code appears not to do anything because it calculates the time remaining to be the same every time it runs.

On the other hand, if you declare currentTime inside your function, i.e.

let getRemainingTime = () => {
  const currentTime = new Date().getTime();
  const timeLeft = futureTime - currentTime;
  ...
};

then currentTime is evaluated every time your function is called. It will likely have a different value for each call, and hence it will calculate the time remaining differently on each occasion.

You don't need to do the same for futureTime because that value doesn't change.

Note that in your second code block, you refer to a variable named currentDate, which you don't define anywhere. The corresponding line in your first code block uses new Date() instead, and I've assumed that that's what you mean.