使用setTimeout跳转到（Typescript）.forEach循环中的下一次迭代

Posted 2021-05-05

我有一个包含图像网址的数组，并希望每10秒更改一次img标记的src。我使用forEach迭代数组，回调包含一个setTimeout，它定期调用执行DOM操作的函数（replaceImage），如下所示：

const el = document.querySelector('img');
images.forEach((obj: Image, index: number) => {
    timer = window.setTimeout(() => {
        replaceImage(el, obj);
    }, index * 10000);
});

但是，如果单击一个按钮，我希望循环不等待超时并跳到下一个迭代 - 即，直接替换图像。

我天真地认为这可以通过clearTimeout(timer)按钮点击完成。

（作为旁注，上面的内容发生在Electron应用程序的渲染过程中）。

答案

保持你想要显示的图像链接数组（例如diashow[url1, url2, ...]。当一个函数填满数组时，它调用setTimeout(()=> nextPicture(el, diashow))。方法nextPicture(el, diashow)调用类似的东西

const picture = diashow.shift();

if(picture) {
    el.url = picture;
    this.timeHandle = setTimeout(()=>nextPicture(el, diashow), 10000);
}

在这种情况下，您的图片将定期更换。在你的按钮方法中，你也可以调用el.url = diashow.shift()，也可以通过调用clear并立即设置来重置计时器。

另一答案

我想这会做你想要的。注意：这将连续旋转图像，即在最后一个之后，第一个将被加载 - 不确定是否需要

const el = document.querySelector('img');

let index = 0;
let interval;

const go = () => {
    const doImage = () => {
        replaceImage(el, img[index]);
        index = (index + 1) % images.length;
    };
    if (interval) {
        clearInterval(interval);
    }
    interval = setInterval(doImage, 10000);
    doImage();
}
go();

在点击按钮上调用go()会

1. 立即加载下一张图片;和
2. 重新启动间隔 - 因此新图像将保持10秒钟