使用 setInterval() 刷新图像

Image refreshing with setInterval()

我有 4 个 div,每个都包含一个图像项和一个包含 4 个 div-id 的 select 列表。我想通过每 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);
});

感谢 donnywals !