使用setInterval(）刷新图像

Image refreshing with setInterval()

本文关键字：刷新 图像 setInterval 使用      更新时间：2023-09-26

我有4个div，每个div都包含一个图像项和4个div id的选择列表。我想通过每2秒更改一次每个图像的来源来同时刷新图像。

我对每个图像使用setInterval()，问题是我必须同时停止所有计时器。

我应该为每个div/img创建一个计时器变量吗？

$(.div-id option:selected).each(function(){
   var timer = setInterval(function(){
       $(.div-id img).attr("src", "new-source-path");
   },2000);
});

如何在不停止每个计时器Id的情况下一次停止所有活动计时器？

有setTimeout()或任何插件的解决方案吗？

我会选择一个在所有图像中循环的单个计时器。然后，当计时器不再需要时，我可以丢弃单个计时器。

var timer = setInterval(swapImages, 2000);
function swapImages() {
    $(.div-id option:selected).each(function(){
        $(.div-id img).attr("src", "new-source-path"); 
    });
}
// some time later
clearInterval(timer);

PS。我假设你的代码是一些伪代码，所以我复制了你的命名

最终解决方案

function swapImages() {
        $(".div-id-list option:selected").each(function () {
            var url = "new-source-path";
            $("#div-id img").attr("src", url);
        });
    }
function stopTimer() {
    clearInterval(timer);
}

$(".div-id-list").on("change", function () {
    stopTimer();
    timer = setInterval(swapImages, 2000);
});

感谢唐尼！

相关文章：