Looking to just return one item at a time with a loop on an array in local storage, currently I have built a marquee with css to simulate a scrolling animation. The goal is to loop in a way that returns just one
element, then on the second loop, return the second item and so forth. Is this possible through setInterval or setTimeout? where the index is looped between delays or timeouts?
Is it possible to do this with a for loop? Or should I use something else? I specifically need the first item shown, then the second, exclusively and can't seem to properly articulate it enough as to find an answer
I've tried using the Queue class, but cant seem to get that to work either. This is the closest I can come up with as a working example.
Gif Exmaple
Code below
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);
})
What would be the best way to go about that?
Someone mentioned use a generator function, but I have no idea how that would help me in this situation, given that I need to return each result as a singular license plate, and not groups of them.
My understanding of this problem is that you need a way to 'save' an index of some data array such that it can be incremented when the next timed change occurs.
I have prepared an example to illustrate how this might be achieved that might be adaptable to your specific needs.
Firstly, setInterval (in my example started by a button press) defines when a change will be made.
The processes to be preformed are placed inside the function argument of the setInterval call. In my example this simply involved displaying the string content of an array element to on the page.
The important bit is that the array is referenced by a numeric index that is defined at global scope but incremented from inside the function. Thus, on each cycle of the interval, the index read is one more than the last.
To deal with out of bounds errors (that would occur if the index is greater than the length of the array), the index is subjected to remainer division by the length of the array using index %= content.length such that incrementing index at the end of the array, resets it to 0 to continue at the start of the array.
The setInterval is assigned to a variable such that it can be referenced by clearInterval if the cycling process is to be halted.
Because the index is a global variable, it's value persists if the interval is cancelled so if the interval is set again, the index will be the value the cycle was stopped at and so the effect is to continue from where a pause occured (rather than begin from the first element each time the cycle is resumed).
The function inside the setInterval can be modified to process whatever data is needed, the relevant bit is that it retains memory of an incrementing index value.
working snippet:
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>