使用 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 !
我有 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 !