如何添加不与更新内容功能冲突的自动图像幻灯片放映

Question

我有一些通过JSON显示的图像。这个文件每10秒刷新一次内容，这样添加的新图像就可以在不刷新页面的情况下显示。

我正在努力添加幻灯片代码，而没有两个刷新相互冲突。

我真的很感激你的帮助。

这是我当前的代码。

function update_content() {
$.getJSON("showImages.php", function(data) {
$("#slides").html(
data.result.map(({image1}) => `<img class="slides" src="data:image/png;base64,${image1}" />`).join("")
);
setTimeout(update_content, 10000); 

var index = 0;
slideshow();
function slideshow() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";  
}

index++;
if (index > x.length) {index = 1}    
x[index-1].style.display = "block";  
setTimeout(slideshow, 20000); 
}

})
}
$(function() {
update_content()
})

Answer 1

这样写，刷新就不可能不相互冲突，导致更新时出现大混乱。每10秒，ping回服务器获取json然后生成一个线程(不是技术意义上的，而是行为意义上的)它每20秒隐藏所有幻灯片并显示第一张幻灯片。在这个页面运行大约60秒后，您现在有六个slideshow()函数的实例排队等待运行，新创建的一个试图显示第一张幻灯片，下一个最近创建的两个显示第二张幻灯片，下两个显示第三张幻灯片，等等。因为网络延迟是不可预测的，所以它们都会在不同的时间以不可预测的顺序触发。

主要问题是setTimeout(slideshow, 20000)。因为这是当前编写的，所以不需要。Slideshow()已经从外部函数每10秒运行一次;它不需要在自己的超时中单独运行。如果你已经在这个时间间隔内运行它，那么slideshow函数无论如何都是无用的，服务器只需要在其json中返回一张图像，整个slideshow函数可以被删除。

虽然我质疑为什么你需要做一个网络往返每10秒开始。除非这是相机feed的实时快照之类的，否则你可以简单地给javascript一个大的图像数组，让它循环使用，或者让服务器每10分钟左右ping一次新图像。如果你走这条路，把slideshow()从update_content()函数中移出来，只从jquery onready函数中调用它一次，设置它运行，不用管它。如果您需要在getJson回调中调用slideshow()，请确保在前面的setTimeout(slideshow, ...)的返回值上调用cancelTimeout，这样您就不会像上面描述的那样创建伪线程。