Question

我有一个包含图像网址的数组，并希望每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应用程序的渲染过程中。）

Answer 1

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

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()

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

Answer 2

保持您想要显示的图像链接数组（例如<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="header"></header>。当一个函数填满数组时，它调用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); }并可以通过调用clear来重置计时器并立即设置。

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

2 个答案: