Within my array, I have a list of image URLs that I need to update the src attribute of an img tag every 10 seconds. To achieve this, I am using a forEach loop which includes a setTimeout function that calls a DOM manipulation function (replaceImage) as shown:
const el = document.querySelector('img');
images.forEach((obj: Image, index: number) => {
timer = window.setTimeout(() => {
replaceImage(el, obj);
}, index * 10000);
});
However, I encountered an issue where if a button is clicked, I want the loop to immediately move to the next iteration without waiting for the timeout to complete—essentially replacing the image right away.
I initially attempted to use the clearTimeout(timer) method upon button click to achieve this behavior.
It's worth noting that the above task is being carried out in a renderer process of an Electron application.