Tengo algunas imágenes que estoy mostrando a través de JSON. Este archivo actualiza el contenido cada 10 segundos para que las nuevas imágenes agregadas se muestren sin actualizar la página.
Estoy luchando por agregar un código de presentación de diapositivas sin que las dos actualizaciones choquen entre sí.
Realmente agradecería algo de ayuda.
Este es mi código actual.
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() })De la forma en que está escrito, no hay forma de que las actualizaciones no choquen entre sí y causen un gran lío en la actualización. Lo que tiene aquí, cada 10 segundos, hará un ping al servidor para obtener algún json y luego generará lo que es esencialmente un hilo (no en el sentido técnico, sino en el sentido del comportamiento) que cada 20 segundos oculta todas las diapositivas y muestra la primera diapositiva. Aproximadamente 60 segundos después de que se ejecute esta página, ahora tiene seis instancias de la función slideshow() en cola para ejecutarse, la recién creada intenta mostrar la primera diapositiva, las siguientes dos creadas más recientemente muestran la segunda, las dos siguientes muestran la tercero, etc. Y debido a que el retraso de la red es impredecible, todos se activarán en momentos ligeramente diferentes en un orden impredecible.
El principal problema es setTimeout(slideshow, 20000) . No es necesario ya que esto está escrito actualmente. Slideshow () se ejecuta cada 10 segundos desde la función externa que se ejecuta cada 10; no necesita ejecutarse por separado en su propio tiempo de espera. Y si ya lo está ejecutando en ese intervalo, la función de presentación de diapositivas es inútil de todos modos, y el servidor solo necesita devolver una imagen en su json, y se puede eliminar toda la función de presentación de diapositivas.
Aunque me pregunto por qué necesita hacer un viaje de ida y vuelta a la red cada 10 segundos para empezar. A menos que se trate de una instantánea en tiempo real de una transmisión de cámara o algo así, puede simplemente darle a javascript una gran variedad de imágenes para que recorra y tal vez hacer ping al servidor para obtener nuevas imágenes cada 10 minutos más o menos. Si sigue esta ruta, en su lugar, mueva slideshow() fuera de la función update_content() y simplemente llámelo una vez desde la función jquery onready para configurarlo y dejarlo así. Si necesita llamar a slideshow() en la devolución de llamada de getJson , asegúrese de cancelTimeout el tiempo de espera en el valor de retorno de setTimeout(slideshow, ...) anterior, para que no cree pseudosubprocesos como se describe anteriormente.