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

【问题标题】：Skip to next iteration in a (Typescript) .forEach loop with setTimeout使用 setTimeout 跳到（Typescript）.forEach 循环中的下一次迭代
【发布时间】：2018-03-01 07:07:49
【问题描述】：

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

【问题讨论】：

标签： javascript typescript foreach electron settimeout

【解决方案1】：

保存您希望显示的图像链接数组（例如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 并立即设置来重置计时器。

【讨论】：

嗨奥利弗，对不起，但我不确定我是否理解你所说的“当一个函数填满数组时它调用 setTimeout(() => nextPicture(el, diashow)”的意思
@dfucci：您的问题以：“我有一个包含图像的 url 和...”的数组开始。那么你从哪里得到那个数组呢？交付的那个东西创建了该数组，它必须通过第一次调用setTimeout() 来开始幻灯片放映。之后，如果有更多图片可用，该方法将自动调用自己。

【解决方案2】：

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

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 秒

【讨论】：