stopping and restarting an interval (or timeout?)

Question

I have a script that checks the hour and creates elements in a div if certain conditions are met (if the hour is betwwen 6 and 8 it creates a morning list, if the hour is between 19 and 20 it creates an evening list. The problem is, I've set both a timeout and an interval on the script (different tests, not together at the same time) to get it to constantly check the hour, and it then continues to append to the ul. I want the function to get called continually to stay up to date, but I want it to stop running prior to creating the new elements if the hour arguments are met. I'm having difficulty with this... here's my code.

My coding is getting ahead of my learning... thank you again for any assistance offered, reading other articles here has been a big help in figuring out how to make pieces of this application work. Every once in a while I run into an issue I can't seem to read my way out of, though.

morningMedsList = ['med1', 'med2', 'med3', 'med4', 'med5'];
eveningMedsList = ['med1', 'med2', 'med3', 'med4', 'med5'];

const hour = new Date().getHours();

function listMeds() {
    if (hour >= 6 && hour <= 8) {
        clearInterval(listMeds);
    } else if (hour >= 19 && hour <= 20) {
        clearInterval(listMeds);
    } else {}

    if (hour >= 6 && hour <= 8) {
        let morningMeds = document.getElementById('morning-meds-list');
        mornMed = document.createElement('li');
        morningMedsList.forEach(function (med, index) {
            clone = mornMed.cloneNode();
            clone.textContent = (index +1) + '. ' + med;
            morningMeds.appendChild(clone);
        });
    } else if (hour >= 19 && hour <= 23) {
        let eveningMeds = document.getElementById('evening-meds-list');
            eveMed = document.createElement('li');
            eveningMedsList.forEach(function (med, index) {
                clone = eveMed.cloneNode();
                clone.textContent = (index +1) + ': ' + med;
                eveningMeds.appendChild(clone);
            });
        }

    console.log('test');
}

setInterval(listMeds, 5000);

Answer 1

You need to assign the interval to a global variable, and use this in the call to clearInterval().

You also should get the hour inside the listMeds function. Otherwise you'll always be checking the time when the page loaded, not the current time that the interval function is running.

morningMedsList = ['med1', 'med2', 'med3', 'med4', 'med5'];
eveningMedsList = ['med1', 'med2', 'med3', 'med4', 'med5'];

let medsInterval = setInterval(listMeds, 5000);

function listMeds() {
  const hour = new Date().getHours();
  console.log(hour);
  if (hour >= 6 && hour <= 8) {
    clearInterval(medsInterval);
  } else if (hour >= 19 && hour <= 20) {
    clearInterval(medsInterval);
  } else {}

  if (hour >= 6 && hour <= 8) {
    let morningMeds = document.getElementById('morning-meds-list');
    mornMed = document.createElement('li');
    morningMedsList.forEach(function(med, index) {
      clone = mornMed.cloneNode();
      clone.textContent = (index + 1) + '. ' + med;
      morningMeds.appendChild(clone);
    });
  } else if (hour >= 19 && hour <= 23) {
    let eveningMeds = document.getElementById('evening-meds-list');
    eveMed = document.createElement('li');
    eveningMedsList.forEach(function(med, index) {
      clone = eveMed.cloneNode();
      clone.textContent = (index + 1) + ': ' + med;
      eveningMeds.appendChild(clone);
    });
  }

  console.log('test');
}

Morning Meds
<ul id="morning-meds-list"></ul>
Evening Meds
<ul id="evening-meds-list"></ul>