1

Tengo un textarea en el cual, al dar click al botón, lee cuántas líneas tiene.

Una vez leídas se meten en un Array y puedo sacar un length. Comienzo una nueva función donde voy a intentar mezclar las líneas, cambiándolas de lugar unas con otras y poder verlo en tiempo real.

Inicié un intervalo para hacerlo cada segundo. El intervalo funciona bien, el problema es cambiar de lugar las líneas.

Pd: no tiene botón de parada aún, pero se hará, no hace falta añadirlo, se hacerlo.

window.addEventListener('load', ()=>{
    let btn = getBtn();

    btn.addEventListener('click', ()=>{
        getElements();
    });
})
function getBtn(){
    return document.querySelector('.random');
}

function getElements(){
    //obtenemos el valor del textarea
    let txt = document.querySelector('.txt').value;
    //obtenemos el número de líneas como array
    let spl = txt.split('\n');

    //comenzamos a randomizar
    startRandom(txt, spl);
}

function startRandom(txt, spl){
    //declaramos un intervalo
    let itv = 1000;

    //declaramos dos rng con max

    //iniciamos el intervalo
    setInterval(function(){
        let rng = randomSplValue(spl);
        let rpg = randomSplValue(spl);
        console.log(spl[rng]);
        console.log(spl[rpg]);
        let aux = spl[rng];
        spl[rng] = spl[rpg];
        spl[rng] = aux;
    },500);
    
}

function randomSplValue(spl){
    //Obtener número random con maximo del lng
    return Math.floor(Math.random() * Math.floor(spl.length));
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>017</title>
    <script src="js/017.js"></script>
    <link rel="stylesheet" type="text/css" href="css/017.css">
</head>
<body>
<textarea class="txt"></textarea>
<br>
<button class="random">RANDOMIZE</button>
</div>
</body>
</html>

2
  • 2
    Por cierto debo comentarte que en la lógica que aplicas hay un margen de error y es que de ninguna manera estas sorteando, filtrando o controlando la posibilidad de una colisión de los números que generaste de manera aleatoria, la posibilidad de que esto suceda es mínima, pero incrementa aun mas cuando lo redondeas. Así que puede que exista la posibilidad de que sobrescribas un valor sin darte cuenta, checa eso, un saludo. el 26 mar. 2021 a las 15:55
  • Gracias, lo pensé y se me olvidó haciendo cosas, ya tengo algo mas que hacer
    – AQMR
    el 26 mar. 2021 a las 16:26

2 respuestas 2

2

Una manera mas sencilla de hacer esto es utilizando el método sort, para tener mas control también puedes usar el método map para convertir cada valor en un objeto que contenga un numero aleatorio el cual puedas sortear, mira el siguiente ejemplo

let arr = ['Hola', 'b', 'u', 'r', 1, 2, 3, {perros: true}]

let random = arr
  .map((a) => ({sort: Math.random(), value: a}))
  .sort((a, b) => a.sort - b.sort)
  .map((a) => a.value)

console.log(random)

Aquí lo que pasa es que mapeamos los valores en un objeto y le asignamos un valor random con Math.random() en la key sort y mantenemos el valor original del valor en otra llave en el primer map, luego utilizamos sort para sortear los objetos descendentemente por el numero random anterior y lo mapeamos de vuelta para devolver cada valor a la raíz del array.

Esto lo podrías implementar con tu código de la siguiente manera (de una manera muy resumida):

const start = document.querySelector('#start')
const txt = document.querySelector('#txt');

start.addEventListener('click', () => {
  let arr = txt.value.split('\n')
  let inter = setInterval(() => {
    let random = arr
    .map((a) => ({sort: Math.random(), value: a}))
    .sort((a, b) => a.sort - b.sort)
    .map((a) => a.value)
    txt.value = random.join('\n')
  }, 1000)
  let clear = setTimeout(() => {
    clearInterval(inter)
  }, 10000)
})
<textarea id="txt">
hola
como estas
que
me cuentas
</textarea>
<button id="start">Start</button>

Espero que te sea de ayuda, un saludo.

5
  • La sintaxis del map me parece algo liosa aun, estoy comenzando a programar. Pero la verdad, viendo como funciona, creo que es bastante mejor de como me salió a mi. Si hubiera una forma de ver en ms cuál tarda menos...
    – AQMR
    el 26 mar. 2021 a las 13:44
  • Nice bro, realmente la manera mas eficiente y resumida seria con map y sort, y son metodos faciles de usar luego que los entiendes, tu forma es muy verbosa y funcional, luego te darás cuenta que siempre la manera mas entendible de hacer las cosas es de manera compacta y no tan explicita. Otra cosa es que aunque relativamente map y sort son mas eficiente ya que es low level, en cuestiones de tiempo no hace mucha diferencia, mi intervlao es lento para que notes que funciona pero esto es intencional, saludos :D el 26 mar. 2021 a las 13:53
  • Hombre, con un intervalo de 10 ms hubiera visto tambien el cambio eh XD. Barajar palabras entre líneas se ve muy fácilmente XD. Es mas, por probar acabo de hacerlo a 1ms y se ve igual de bien XD
    – AQMR
    el 26 mar. 2021 a las 14:00
  • JAJA nice! So, un saluido. el 26 mar. 2021 a las 14:03
  • 1
    Me quede pegado en la pregunta y quería ver como lo podía hacer con vue jajaja por si a alguien le interesa jsfiddle.net/denyncrawford/dknoyfgv Incluso añadí un botón para parar. el 26 mar. 2021 a las 18:45
1

Ya di con la solución, el problema es que no me acordé de hacer un parseInt al número generado aleatoriamente, por tanto, me devolvía un valor de texto en vez de numerico, e intentaba trabajar con el:

function randomSplValue(spl){
    //Obtener número random con maximo del lng
    var rng = Math.floor(Math.random() * Math.floor(spl.length));
    return parseInt(rng);
}

Cambié esa función y resuelto

5
  • Que bueno que haya encontrado la solución
    – Christian
    el 26 mar. 2021 a las 13:25
  • ¿Por qué parseInt() es la solución, si Math.floor() devuelve un entero?
    – Triby
    el 26 mar. 2021 a las 15:51
  • @Triby no había notado eso jaja el 26 mar. 2021 a las 15:56
  • Pues me devolvía un valor de texto, vete tu a saber por qué, pero me di cuenta con un console.log XD Le puse el parseInt y comenzó a funcionar como quería
    – AQMR
    el 26 mar. 2021 a las 16:27
  • 1
    Si estabas obteniendo una cadena en lugar de entero, no era dentro de esa función, innecesaria, por cierto. De cualquier forma, la solución propuesta por @DєηyηCrawford es más efectiva, sencilla y no permite duplicados.
    – Triby
    el 26 mar. 2021 a las 17:26

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.