0

Hola chico@s estoy buscando la forma de generar una hoja de contenido (trozos de letras canciones) aleatorio que se refresca cada x segundos.

Hasta ahora he conseguido que el sistema me visualice el contenido aleatorio (genial) cada vez que actualizo la página y tambien que se refresque automaticamente.

El tema es que estoy viendo que consume demasiados recursos y que me parece excesivo recargar todos los bloques de codigo cuando solo necesito las canciones.

Para refrescar estoy utilizando un codigo de javascript que me he encontrado por la red aunque es muy loco porque no consigo generar un boton que lo desactive y se hace algo pesado. He visto que con ajax se puede hacer mucho mas eficiente.

No controlo mucho de programación y para este proyecto estoy utilizando un gestor de contenido.

Os pego aquí el código por si resulta ayudar.

    function reFresh()
  {
  window.open(location.reload(true))
  }
var repeticion = window.setInterval("reFresh()",30000);
<div class="uk-grid-collapse uk-child-width-expand@m uk-margin" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > delay: 500; repeat: true">
  <div class="uk-flex uk-flex-middle uk-flex-center">
    <div class="uk-card-body uk-width-expand uk-text-center uk-light">
    <!-- Contenido letras -->
      <?php if ($this->checkPosition('copla')) : ?>
         <div class="magia"><?php echo $this->renderPosition('copla'); ?></div><?php endif; ?>
    </div>
  </div>
</div>


<div class="uk-position-small uk-position-bottom-right uk-overlay uk-overlay-default">
  <a id="actualizar"  href="javascript:location.reload()"  onclick="UIkit.notification({message: 'Volai-vai OUTRA!...', pos: 'top-center'})"><span uk-icon="icon: refresh; ratio: 1.5" uk-tooltip="Refrescar cantiga"></span></a>
</div>

<div><form class="toogle-dn" action="" onclick="window.clearInterval(repeticion);"><input class="toogle-dni" type="checkbox" id="toogle" /><label class="toogle-dni" for="toogle"></label></form></div>

4
  • Para poder detener el refresco, debes guardarte el resultado de setInterval en una variable (var interval = setInterval("actualizar()",30000);) y, cuando quieras detenerlo, llamar a clearInterval pasándole esa variable: clearInterval(interval); Commented el 21 sept. 2018 a las 11:01
  • Si quieres hacer que solo se refresque una parte del contenido, tendrás que meter el contenido en un div con un id para poder actualizar después al obtener con una llamada ajax lo que va dentro de dicho div Commented el 21 sept. 2018 a las 11:03
  • Lo que haría yo: 1 cargar varias canciones aleatorias en unos elementos ocultos , y cada x segundos cambiar el contenido de tu card por el contenido de alguno de los elementos ocultos. Esto lo haría con JavaScript.
    – enxaneta
    Commented el 21 sept. 2018 a las 11:20
  • alfinal he conseguido un toogle, gracias a tu tip Javi, finalmente puedo desactivar el reload. <div><form class="toogle-dn" action="" onclick="window.clearInterval(repeticion);"><input class="toogle-dni" type="checkbox" id="toogle" /><label class="toogle-dni" for="toogle"></label></form></div> Commented el 24 sept. 2018 a las 9:11

2 respuestas 2

0

Lo que haría yo:

  1. Cargar varias canciones aleatorias en unos elementos ocultos; esto lo haría con PHP.

  2. Al hacer click en actualizar cambia el contenido de tu card por el contenido de alguno de los elementos ocultos. Esto lo haría con JavaScript.

A continuación un ejemplo muy básico:

let ocultos = Array.from(document.querySelectorAll("#ocultos .cancion"));

function contenidoAleatorio(){
  contenido.innerHTML = ocultos[~~(Math.random()*ocultos.length)].innerHTML;
}

contenidoAleatorio();
actualizar.addEventListener("click", contenidoAleatorio)
#ocultos{display:none}
<div class="uk-grid-collapse uk-child-width-expand@m uk-margin" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > delay: 500; repeat: true">
  <div class="uk-flex uk-flex-middle uk-flex-center">
    <div class="uk-card-body uk-width-expand uk-text-center uk-light">
      
      
      <div id="contenido"><!-- Contenido letras --></div>
  
         
    </div>
  </div>
</div>


<div class="uk-position-small uk-position-bottom-right uk-overlay uk-overlay-default">
  <button id="actualizar">actualizar</button>
</div>


<div id="ocultos">
  <!--Generado con php-->
  <p class="cancion">aaaaaaa</p>
  <p class="cancion">bbbbbbb</p>
  <p class="cancion">ccccccc</p>
  <p class="cancion">ddddddd</p>
  <p class="cancion">eeeeeee</p>
  <p class="cancion">fffffff</p>
  <p class="cancion">gggggg</p>
  <p class="cancion">hhhhhh</p>
  <p class="cancion">iiiiii</p>
  <p class="cancion">jjjjjj</p>
  <p class="cancion">kkkkkk</p>
  <p class="cancion">llllll</p>   
</div>

1
  • Esta idea esta bien peor lo que buscaba es algo mas simple ya que el modulo ya me esta enviando 1 copla aleatoria... y la idea es simplemente actualizar/refrescar tan solo el <div id="contenido"><!-- Contenido letras --></div> Yo pensanba en algo tipo iframe que solo refresque el contenido ... desde mi mas maxima ignorancia la programación no es mi fuerte... Commented el 23 sept. 2018 a las 18:36
0

Mi recomendacion es utilizar algo tipo SSE(Server Send Events). Te pongo un ejemplo.

Nuestro script en PHP.

<?php
#Funcion que envia los datos
function enviar($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}

  //Para esta prueba cada 3 segundos vamos a enviar datos.
    $i = 1;
    while(true){
      $i += 1;
        enviar($i, "Data $i");
        sleep(3);
    }

?>

En tu cliente simplemente tienes que instanciar la clase EventSource, que recibe el archivo donde tenemos el script php.

var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
}

De esta manera estamos cada 3 segundos recibiendo nuevos datos. Lo unico que te quiedaria como distribuir la informacion que te llega.

Para más información puedes verlo aqui

Te recomiendo que mires esto enlace para más info

Enlace 1

1
  • uff lo investigare aunque no ando muy fino chicos de programación. Commented el 23 sept. 2018 a las 18:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.