Buscando solo devolver un elemento a la vez con un bucle en una matriz en el almacenamiento local, actualmente he creado una marquesina con css para simular una animación de desplazamiento. El objetivo es hacer un bucle de forma que devuelva solo un elemento, luego, en el segundo bucle, devolver el segundo elemento y así sucesivamente. ¿Es esto posible a través de setInterval o setTimeout? donde el índice está en bucle entre retrasos o tiempos de espera?
¿Es posible hacer esto con un bucle for? ¿O debería usar algo más? Necesito específicamente el primer elemento que se muestra, luego el segundo, exclusivamente y parece que no puedo articularlo correctamente como para encontrar una respuesta.
Intenté usar la clase Queue, pero parece que tampoco puedo hacer que funcione. Esto es lo más cercano que puedo encontrar como un ejemplo de trabajo.
Ejemplo de gif
Código a continuación
const marqueeMonthlies = () => { insertMarquee.empty(); let marqueeMonthlyPlates = JSON.parse(localStorage.getItem('Monthly Plates')); for (i = 0; i < marqueeMonthlyPlates.length; i++) { insertMarquee.append(` <div class="container" id="generatedMonthlyPlates"> <input type="text" width="100px" name="monthlyLicensePlate" id="${marqueeMonthlyPlates[i]}" class="licensePlate" placeholder="AB12345" value="${marqueeMonthlyPlates[i]}"/> </div> `) } } startMonthlies.click((event) => { event.preventDefault(); setInterval(marqueeMonthlies(),1000); })¿Cuál sería la mejor manera de hacerlo?
Alguien mencionó el uso de una función de generador, pero no tengo idea de cómo me ayudaría en esta situación, dado que necesito devolver cada resultado como una placa singular, y no como grupos de ellas.
Mi comprensión de este problema es que necesita una forma de 'guardar' un índice de alguna matriz de datos de modo que pueda incrementarse cuando ocurra el próximo cambio cronometrado.
He preparado un ejemplo para ilustrar cómo se podría lograr esto que podría adaptarse a sus necesidades específicas.
En primer lugar, setInterval (en mi ejemplo, iniciado al presionar un botón) define cuándo se realizará un cambio.
Los procesos a realizar se colocan dentro del argumento de la función de la llamada setInterval . En mi ejemplo, esto simplemente implicó mostrar el contenido de la cadena de un elemento de matriz en la página.
Lo importante es que la matriz está referenciada por un índice numérico que se define en el ámbito global pero se incrementa desde dentro de la función. Así, en cada ciclo del intervalo, el índice leído es uno más que el último.
Para tratar los errores fuera de los límites (que ocurrirían si el índice es mayor que la longitud de la matriz), el índice se somete a la división restante por la longitud de la matriz utilizando el index %= content.length de modo que se incrementa el índice en el final de la matriz, lo restablece a 0 para continuar al comienzo de la matriz.
setInterval se asigna a una variable de modo que clearInterval pueda hacer referencia a ella si se va a detener el proceso de ciclo.
Debido a que el índice es una variable global, su valor persiste si el intervalo se cancela, por lo que si el intervalo se establece nuevamente, el índice será el valor en el que se detuvo el ciclo y, por lo tanto, el efecto es continuar desde donde ocurrió una pausa (en lugar de empezar desde el primer elemento cada vez que se reanuda el ciclo).
La función dentro de setInterval se puede modificar para procesar cualquier dato que se necesite, el bit relevante es que retiene la memoria de un valor de índice incremental.
fragmento de trabajo:
const display = document.getElementById("output"); const content = ["cat", "dog", "rabbit", "goldfish", "tortoise", "pony", "chicken"]; let intervalId; let index=0; function cycleContent (){ intervalId = setInterval(() => { index %= content.length display.innerText = content[index]; index++; },1000); } // end cycleContent function; div { height: 1.2em; } <p><button onclick="cycleContent()">start</button></p> <div id="output"> </div> <p><button onclick="clearInterval(intervalId)">stop</button></p>