Tengo un script que verifica la hora y crea elementos en un div si se cumplen ciertas condiciones (si la hora es entre las 6 y las 8, crea una lista matutina, si la hora es entre las 19 y las 20 crea una lista vespertina. El problema es decir, configuré un tiempo de espera y un intervalo en el script (pruebas diferentes, no juntas al mismo tiempo) para que verifique constantemente la hora, y luego continúa agregando a la ul. me llaman continuamente para mantenerme actualizado, pero quiero que deje de ejecutarse antes de crear los nuevos elementos si se cumplen los argumentos de la hora. Tengo dificultades con esto... aquí está mi código.
Mi codificación se está adelantando a mi aprendizaje... gracias de nuevo por cualquier ayuda ofrecida, leer otros artículos aquí ha sido de gran ayuda para descubrir cómo hacer que las piezas de esta aplicación funcionen. Sin embargo, de vez en cuando me encuentro con un problema del que parece que no puedo leer.
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);Debe asignar el intervalo a una variable global y usar esto en la llamada a clearInterval() .
También debe obtener la hora dentro de la función listMeds . De lo contrario, siempre verificará la hora en que se cargó la página, no la hora actual en que se ejecuta la función de intervalo.
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>Creo que el punto es que no quieres borrar ese intervalo, de lo contrario, ¿cómo vas a encenderlo de nuevo? Creo que solo necesita una bandera para verificar si la lista ya se imprimió y no volver a imprimir en ese caso. Borre la lista cuando esté fuera del rango de tiempo y cambie la bandera nuevamente, y así sucesivamente:
const morningMedsList = [ 'morning_med1', 'morning_med2', 'morning_med3', 'morning_med4', 'morning_med5', ]; const eveningMedsList = [ 'evening_med1', 'evening_med2', 'evening_med3', 'evening_med4', 'evening_med5', ]; const medsHours = [6, 7, 8, 19, 20, 21, 22, 23]; const morningContainer = document.getElementById('morning-meds-list'); const eveningContainer = document.getElementById('evening-meds-list'); let wasWithinRange = false; let hour = new Date().getHours(); function listMeds() { hour = new Date().getHours(); console.log('CHECKING TIME, HOUR:', hour); if (!medsHours.includes(hour) && wasWithinRange) { console.log('RESETTING FLAG'); wipeNodes([morningContainer, eveningContainer]); wasWithinRange = false; } if (hour >= 6 && hour <= 8 && !wasWithinRange) { console.log('CREATING MORNING LIST'); createElems(morningContainer, morningMedsList); wasWithinRange = true; } if (hour >= 19 && hour <= 23 && !wasWithinRange) { console.log('CREATING EVENING LIST'); createElems(eveningContainer, eveningMedsList); wasWithinRange = true; } } setInterval(listMeds, 5000); function createElems(elem, list) { const item = document.createElement('li'); list.forEach(function(med, index) { const clone = item.cloneNode(); clone.textContent = index + 1 + '. ' + med; elem.appendChild(clone); }); } function wipeNodes(elems) { elems.forEach((elem) => (elem.innerHTML = '')); } /* TESTING */ const btn = document.querySelector('button'); btn.onclick = () => { hour = Number(prompt('SET HOUR:')); }; <div id="morning-meds-list"></div> <div id="evening-meds-list"></div> <button>SET HOUR MANUALLY FOR TESTING</button>Puse un botón para solicitar un valor de hora manualmente para que pueda probar si ese es el comportamiento que espera.