Question

我有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()或任何插件的解决方案？

Answer 1

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

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。我假设你的代码是一些伪代码，所以我复制了你的namings

Answer 2

最终解决方案

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！

使用setInterval（）刷新图像

2 个答案: