1

Tengo el siguiente inconveniente: Tengo 5 caja de texto en HTML, quiero mover cada una de ellas, pero no al mismo tiempo, quiero que se pueda apreciar como se mueve una por una, he intentado de varias maneras pero no me parece funcionar alguna, quizás no la aplico de la manera correcta, si alguien me puede ayudar a salir de este apuro.

Básicamente lo que estoy haciendo es el ordenamiento por inserción, el cual quiero poder visualizar el ordenamiento como tal, ver como se mueven las cajas de texto y se posicionen donde corresponden, pero claro, para que la visualización sea posible, necesito hacer que la ejecución del código se detenga, permitiendo que la animación de movimientos se ejecute individualmente y no todas al mismo tiempo.

Este es mi código:

'use strict'

var ArrayInsertSort = new Array(6);

//Esta función genera valores aleatorio para el array
function GeneraArreglo() {
  var i = 0;
  while (i != ArrayInsertSort.length) {
    var numero = Math.floor(Math.random() * 6) + 1;
    var esRepetido = false;
    while (!esRepetido) {
      for (var j = 0; j < i; j++) {
        if (numero == ArrayInsertSort[j]) {
          esRepetido = true;
          break;
        }
      }
      if (!esRepetido) {
        ArrayInsertSort[i] = numero;
        i++;
      }
    }
  }
  MostrarArrayIS();
}

//Con esta función muestro el array en las cajas de texto
function MostrarArrayIS() {
  var ArrayIS = document.querySelectorAll(".txtIS");
  var i;
  for (i = 0; i < ArrayInsertSort.length; i++) {
    ArrayIS[i].value = ArrayInsertSort[i];
  }
}

//Esta función me permite obtener la posición de la caja de texto y moverla 
function animaInsertSort(index) {
  var ArrayIS = document.querySelectorAll(".txtIS");
  var posicion = ArrayIS[index].getBoundingClientRect();
  var t = setInterval(move, 10);
  var pos = 0;

  function move() {
    if (pos >= (-(posicion.top - posicion.bottom) + 5)) {
      clearInterval(t);
    } else {
      pos++;
      ArrayIS[index].style.top = pos + 'px';
    }
  }
}

//Esta función es del método por inserción, quiero que me permita visualizar el ordenamiento como tal
function InsertSort() {
  var j;
  var aux;
  for (var i = 0; i < ArrayInsertSort.length; i++) {
    /*Aquí es donde quisiera aplicar que el código permita 
    ejecutar la función que me permite mover la caja de texto 
    y que este como que se detenga, para que así permita 
    ver como las cajas se mueven una por una y no 
    todas al mismo tiempo.*/
    animaInsertSort(i);
    j = i - 1;
    while ((j >= 0) && (aux < ArrayInsertSort[j])) {
      ArrayInsertSort[j + 1] = ArrayInsertSort[j];
      j--;
    }
    ArrayInsertSort[j + 1] = aux;
  }
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>Visualización de ordenamientos - ADA</title>
</head>

<body>
  <section>
    <div id="Insert-Sort">
      <p class="titulo">Insert Sort</p>
      <div class="array">
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
      </div>
      <div class="boton">
        <input type="button" value="Ordenar" class="styleboton" onclick="InsertSort();">
      </div>
    </div>
    <input type="button" value="Generar Arreglo" class="styleboton" onclick="GeneraArreglo();">
  </section>
  <script type="text/javascript" src="js/scripts.js"></script>
</body>

</html>

7
  • Hola @Delther, ArrayInsertSort está indefinido. Trata de agregar el código que falta que podamos evaluar el problema. Commented el 23 ene. 2021 a las 8:48
  • 1
    Ya agregue mas información, como así mismo como defino el ArrayInsertSort y como le doy valores al mismo.
    – Deither
    Commented el 23 ene. 2021 a las 9:05
  • falta agregar el código HTML asociado al código que has compartido para completar el ejemplo. Commented el 23 ene. 2021 a las 9:12
  • 1
    Listo, ya se encuentra el código de HTML
    – Deither
    Commented el 23 ene. 2021 a las 9:19
  • Está interesante tu planteamiento. Lo estoy analizando. Commented el 23 ene. 2021 a las 9:44

1 respuesta 1

0

No acabo de entender cómo es que deseas ordenar, pero la solución para mostrar uno a uno el movimiento de los campos es:

  1. No ejecutes la animación dentro del ciclo, hazlo hasta salir de él
  2. Tampoco uses otro método adicional (move) para aplicar el cambio
  3. Ejecuta la misma función, de forma recursiva y dentro setTimeout() hasta llegar al final del arreglo
  4. Esta es una de las partes más importantes: Mantén las variables dentro del mismo contexto (scope), evitando usar globales, para obtener el funcionamiento esperado

'use strict'

var ArrayInsertSort = new Array(6);

//Esta función genera valores aleatorio para el array
function GeneraArreglo() {
  var i = 0;
  while (i != ArrayInsertSort.length) {
    var numero = Math.floor(Math.random() * 6) + 1;
    var esRepetido = false;
    while (!esRepetido) {
      for (var j = 0; j < i; j++) {
        if (numero == ArrayInsertSort[j]) {
          esRepetido = true;
          break;
        }
      }
      if (!esRepetido) {
        ArrayInsertSort[i] = numero;
        i++;
      }
    }
  }
  MostrarArrayIS();
}

//Con esta función muestro el array en las cajas de texto
function MostrarArrayIS() {
  var ArrayIS = document.querySelectorAll(".txtIS");
  var i;
  for (i = 0; i < ArrayInsertSort.length; i++) {
    ArrayIS[i].value = ArrayInsertSort[i];
  }
}

//Esta función me permite obtener la posición de la caja de texto y moverla 
function animaInsertSort(index) {
  // ***** Uso de variables locales *****
  let ArrayIS = document.querySelectorAll(".txtIS");
  let posicion = ArrayIS[index].getBoundingClientRect();
  // Mover aquí mismo, sin funciones o métodos adicionales
  let pos = index * 5;
  ArrayIS[index].style.top = pos + 'px';
  // Si no es el último
  if(index < ArrayInsertSort.length - 1) {
      // Ejecutar recursivamente, incrementando index
      setTimeout(animaInsertSort, 300, index + 1);
  }
}

//Esta función es del método por inserción, quiero que me permita visualizar el ordenamiento como tal
function InsertSort() {
  var j;
  var aux;
  for (var i = 0; i < ArrayInsertSort.length; i++) {
    j = i - 1;
    while ((j >= 0) && (aux < ArrayInsertSort[j])) {
      ArrayInsertSort[j + 1] = ArrayInsertSort[j];
      j--;
    }
    ArrayInsertSort[j + 1] = aux;
  }
  // ***** Animar fuera del ciclo *****
  animaInsertSort(0);
}
.array, .txtIS { position:relative; }
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>Visualización de ordenamientos - ADA</title>
</head>

<body>
  <section>
    <div id="Insert-Sort">
      <p class="titulo">Insert Sort</p>
      <div class="array">
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
        <input type="text" class="txtIS" readonly>
      </div>
      <div class="boton">
        <input type="button" value="Ordenar" class="styleboton" onclick="InsertSort();">
      </div>
    </div>
    <input type="button" value="Generar Arreglo" class="styleboton" onclick="GeneraArreglo();">
  </section>
  <script type="text/javascript" src="js/scripts.js"></script>
</body>

</html>

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.