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

Posted 2023-05-08

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

【英文标题】：How to added an automatic image slide show that does not *** with the update content function

【发布时间】：2021-12-13 02:31:09

【问题描述】：

我有一些通过 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()
)

【参考方案1】：

按照这样的编写方式，刷新不可能不会相互冲突并导致更新混乱。您在这里所拥有的将每 10 秒对服务器执行一次 ping 操作以获取一些 json，然后生成本质上是一个线程（不是在技术意义上，而是在行为意义上），每 20 秒隐藏所有幻灯片和显示第一张幻灯片。在此页面运行大约 60 秒时，您现在有六个 slideshow() 函数实例排队运行，新创建的一个试图显示第一张幻灯片，下一个最近创建的两个显示第二张，接下来的两个显示第三，等等。而且由于网络延迟是不可预测的，它们都会以不可预测的顺序在稍微不同的时间触发。

主要问题是setTimeout(slideshow, 20000)。不需要，因为这是当前编写的。 Slideshow() 已经从每 10 秒运行的外部函数开始每 10 秒运行一次；它不需要在自己的超时时间内单独运行。而且如果你已经在那个时间间隔运行了，那么幻灯片功能无论如何也没用，服务器只需要在它的json中返回一张图片，整个幻灯片功能就可以删除了。

虽然我质疑为什么您需要每 10 秒进行一次网络往返。除非这是相机馈送或其他东西的实时快照，否则您可以轻松地为 javascript 提供大量图像以供其循环浏览，并且可能每隔 10 分钟左右对服务器执行一次新图像的 ping 操作。如果您走这条路，请将slideshow() 从update_content() 函数中移出，然后从jquery onready 函数中调用一次以将其设置为运行并保持不变。如果你需要在getJson回调中调用slideshow()，一定要在之前setTimeout(slideshow, ...)的返回值上cancelTimeout，这样就不会像上面描述的那样做伪线程了。

【讨论】：

我有一个以幻灯片格式显示图像的页面。我想要做的是，当我将图像上传到 mysql 数据库时，它会通过它并最好立即将其显示在页面上。 10 分钟的服务器 ping 是我最后的手段。会不会有别的办法？如果有的话，你可以给我举个例子，因为如果我诚实的话，我有点迷失了。我有一个类似的文本代码，它通过选取框运行并且立即更新而不影响滚动。我很乐意为图像幻灯片做同样的事情。任何帮助，将不胜感激。谢谢

如果您希望立即显示新图像，如果/当用户群规模扩大时，每 10 秒 ping 一次服务器是快速执行 DOS 的好方法。如果这是一个问题，我建议查看 websockets，以便服务器可以向连接的客户端发送有关新图像的通知。 （这是一个“轮询与推送”问题。）——如果您不担心扩大规模，那么我在第二段中所说的将适用：将幻灯片合并到 ping 服务器的函数中。主要问题是多个“线程”相互踩踏。