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>
ArrayInsertSort
está indefinido. Trata de agregar el código que falta que podamos evaluar el problema.