5

Tengo el siguiente código que encontré en el sitio en inglés:

<html>

<head>

  <script type="text/javascript">
    var imageUrls = [
      "https://via.placeholder.com/400x400?text=1", "https://via.placeholder.com/400x400?text=2", "https://via.placeholder.com/400x400?text=3", "https://via.placeholder.com/400x400?text=4", "https://via.placeholder.com/400x400?text=5", "https://via.placeholder.com/400x400?text=6"
    ];
    var imageLinks = [
      "https://es.stackoverflow.com/", "https://es.stackoverflow.com/", "https://es.stackoverflow.com/", "https://es.stackoverflow.com/", "https://es.stackoverflow.com/", "https://es.stackoverflow.com/"
    ];

    function getImageHtmlCode() {
      var dataIndex = Math.floor(Math.random() * imageUrls.length);
      var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';
      img += imageUrls[dataIndex];
      img += '\" alt=\"Stackoverflow.com\"/></a>';
      return img;
    }
  </script>
</head>

<body>
  <script type="text/javascript">
    document.write(getImageHtmlCode());
  </script>
</body>

</html>

Funciona como quiero, con la única excepción que en ocasiones repite la misma imagen al refrescar la página. ¿A qué se debe esto? ¿Podrían indicarme si existe un error que afecte este comportamiento?

Muchas Gracias

2
  • 2
    Hola Laura. No, no es un error. Si pides que se generen numeros del 1 al 5 por ejemplo es normal que se muestren en este orden: 1,2,1,1,3,1,2,2,3,3...N. Si lo que quieres es que no se muestren los mismos números necesitas agregar la lógica correspondiente a tu script el 30 abr. 2019 a las 15:08
  • Entiendo, muchas gracias Joel por tu apreciación
    – LauraZ
    el 30 abr. 2019 a las 16:41

1 respuesta 1

9

Básicamente se debe a esto:

Math.floor(Math.random() * imageUrls.length)

La función Math.random() genera una serie de números aleatorios, seguramente hayas tenido la mala suerte de que se te haya repetido varias veces

Como sugiere Lois6b puedes evitar que se repita guardando los datos en localstorage o en una cookie añadiendo al código algo como:

localstorage.setItem("ultimafoto", valor)

En localstorage puedes guardar entre 5MB y 10MB de información, se guarda de manera local, así que no afecta al servidor, por así decirlo queda cacheada.

También puedes usar la sesión para guardar la información hasta que la pestaña o el navegador se cierre.

Fuente: https://platzi.com/blog/local-storage-html5/

Un ejemplo de función que evite la repetición:

var nums = [1,2,3,4,5,6,7,8,9,10],
    ranNums = [],
    i = nums.length,
    j = 0;

while (i--) {
    j = Math.floor(Math.random() * (i+1));
    ranNums.push(nums[j]);
    nums.splice(j,1);
}
2
  • Gracias Nicolas por la fuente, voy a revisarla y te cuento :)
    – LauraZ
    el 30 abr. 2019 a las 16:45
  • Perfecto, me sirvió de mucho tu información, muchas gracias
    – LauraZ
    el 30 abr. 2019 a las 21:41

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.