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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用setTimeout跳转到(Typescript).forEach循环中的下一次迭代相关的知识,希望对你有一定的参考价值。

我有一个包含图像网址的数组,并希望每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秒钟

以上是关于使用setTimeout跳转到(Typescript).forEach循环中的下一次迭代的主要内容,如果未能解决你的问题,请参考以下文章

PHP页面如何自动跳转到另一个页面底部

h5跳转到app的实现

各种页面定时跳转(倒计时跳转)代码总结

JS识别当前URL,延迟5秒后跳转到特定页面

单页面定时跳转的办法小结

JS / jQuery 实现页面跳转到指定位置-锚点