Tengo un conjunto de elementos DOM, cada uno de los cuales necesita su propio temporizador. Eventualmente estaré revisando cada X milisegundos para ver si un hijo en particular de ese elemento está presente o no, pero por ahora no importa mucho lo que suceda dentro del temporizador.
El problema es que quiero que los temporizadores se detengan eventualmente. Puedo configurar los temporizadores con setInterval muy bien, funcionan bien, pero no puedo encontrar la manera de obtener clearInterval para finalizarlos.
Probablemente podría hacer esto con un gran temporizador que observe todos los elementos relevantes, pero ahora tengo curiosidad y quiero resolver esto. Me imagino que probablemente estoy haciendo algo mal en la forma en que declaro o inicio los temporizadores, o clearInterval está apuntando a las funciones setInterval incorrectamente.
Aquí está mi código actual:
$(document).ready(function () { let interval = 1000; let base_count = 1; let current_counts = []; let timers = []; // Count up from base to max and update the text to match. function counter(p, maxCount, i) { p.text(p.text().slice(0,5) + ': ' + current_counts[i]); if (current_counts[i] > maxCount) { clearInterval(timers[i]); } current_counts[i]++; } // Counters for each thing start at 1 current_counts = Array($('.thing').length).fill(base_count); // Each thing gets its own timer. timers = $('.thing').map(function (i, e) { function start() { return setInterval( counter, interval, $(e), 10, // Max value for counter i // Which paragraph are we on? ); } return start; }); // Start the timers. timers.each((i, e) => e()); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="test1 thing">Test1</p> <p class="test2 thing">Test2</p> <p class="test3 thing">Test3</p>Como dijo @pilchard, MutationObserver debería adaptarse a su caso de uso. Aunque esto no responde a su pregunta, aquí está la respuesta:
En el navegador, setInterval devuelve una identificación para el intervalo creado, por lo que puede usarla en clearInterval como se muestra a continuación:
// create the interval let intervalId = setInterval(callback, time); // clear the interval using the id clearInverval(intervalId);e() devuelve todos los temporizadores, luego simplemente bórrelos más tarde
var tmrs = timers.map((i, e) => e()); // stop all timers tmrs.forEach(x=> clearInverval(x)))No estás almacenando los intervalos en ningún lado.
Si cambia lo siguiente:
timers.each((i, e) => e());a:
timers = timers.map((i, e) => e());funcionará