Para el que no conozca la función que estoy utilizando setTimeout, esta simplemente se encarga de ejecutar una función o un código después de pasar cierto tiempo, en este caso puse 500 que es medio segundo. Hago uso de esta función par que se pueda notar el ordenamiento y no sea instantáneo.
A continuación anexo el ejemplo animado, solo denle clic en el botón comenzar:
Y ahora el código que hace posible esta demostración:
//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,0,5,6,9,17,10,4,5,3,2,3,4,5,6,7,88,77,66,55,44,33,21,2,33,44,73,78,9,2,3,0,1,8,1,13];
imprimirArreglo();
function comenzar(){
//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));
//desabilitamos boton
$("#botonsito").prop("disabled",true)
}
//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){
//borramos el contenido del div del contenido
$("#contenido").html("");
//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){
//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}
}
//función quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo
//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];
iteracionQS(i,j,pivote,primero,ultimo)
}
//funcion que suplanta el while y se llama recursivamente
function iteracionQS(i,j,pivote,primero,ultimo){
//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote)
i++;
//mientras j sea mayor a pivote
while(arreglo[j]>pivote)
j--;
//si el indice i es menor o igual a j entonces intercambiamos
if(i<=j){
//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];
//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux
// incrementamos y decrementamos i y j
i++;
j--;
imprimirArreglo(arreglo);
}
//repetimos
if(i<j){
//hacemos una pausa de medio segundo
setTimeout(function(){
iteracionQS(i,j,pivote,primero,ultimo)
},500);
}else{
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){
//pausa de medio segundo
setTimeout(function(){
quicksort(primero,j);
},500);
}
//si ultimo es mayor que i llamamos la funcion nuevamente
if(ultimo>i){
//pausa de medio segundo
setTimeout(function(){
quicksort(i,ultimo)
}
,500);
}
}
}
El algoritmo quicksort es un algoritmo de ordenamiento, como su nombre lo dice, es de los más rápidos y es recomendable su uso (no como el de burbuja).
Aquí anexo el algoritmo de quicksort en javascript:
Función Quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo
//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];
//repetir hasta que i siga siendo menor que j
do{
//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote) i++; //mientras j sea mayor a pivote while(arreglo[j]>pivote)
j--;
//si i es menor o igual a j, los valores ya se cruzaron
if(i<=j){
//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];
//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux
// incrementamos y decrementamos i y j
i++;
j--;
}
}while(i<j);
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){ quicksort(primero,j); } //si ultimo es mayor que i llamamos la funcion nuevamente if(ultimo>i){
quicksort(i,ultimo);
}
}
Como utilizarlo
//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,24,34,54,5,4,2,99,2,3,1,0];
//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));
//imprimimos para ver el resultado
alert(arreglo)
En esta entrada hago uso del algoritmo burbuja en javascript que publique anteriormente, pero lo modifique para poder hacer una demostración utilizando jquery, de cómo va intercambiando los elementos en cada iteración, anexo el algoritmo funcionando, denle al botón comenzar para ver la animación hecha con jquery.
//variables globales
arreglo=[11,15,12,8,1,5,4,2,99,2,3];
var i=0,j=0;
var iteracion; //sirve para guardar el evento de tiempo y poder pararlo
$(document).ready(function(){
imprimirArreglo(arreglo)
});
function comenzar(){
//comienza la iteracion con velocidad de 3 decimas de segundo cada iteración
iteracion=setInterval(burbuja,300);
//desabilitamos boton
$("#botonsito").prop("disabled",true)
}
//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){
//borramos el contenido del div del contenido
$("#contenido").html("");
//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){
//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}
}
function burbuja(){
//recorreremos todos los elementos hasta n-1
if(i<arreglo.length){
//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
if(j<(arreglo.length-i)){
//comparamos
if(arreglo[j]>arreglo[j+1]){
//guardamos el numero mayor en el auxiliar
aux=arreglo[j];
//guardamos el numero menor en el lugar correspondiente
arreglo[j]=arreglo[j+1];
//asignamos el auxiliar en el lugar correspondiente
arreglo[j+1]=aux;
}
j++;
}else{
j=0;
i++;
}
}else{
//aqui se termina el algoritmo por lo cual paramos el setInterval
clearInterval(iteracion);
}
//imprimimos el arreglo en cada iteración
imprimirArreglo()
}
Las funciones setInterval y clearInterval son funciones de javascript, la primera sirve para ejecutar un código cada cierto tiempo, la segunda detiene las iteraciones de la primera.
El algoritmo de ordenamiento burbuja (burbuja mejorada en este caso), es un algoritmo sencillo para ordenar elementos, ha llegado a no ser recomendado por su gran cantidad de iteraciones, pero no está demás conocerlo para comprender algoritmos de ordenamiento de más complejidad y mayor utilidad.
A continuación plasmo la función en javascript y como utilizarla:
Función javascript
function burbuja(arreglo){
//recorreremos todos los elementos hasta n-1
for(i=0;i<(arreglo.length-1);i++)
//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
for(j=0;j<(arreglo.length-i);j++){
//comparamos
if(arreglo[j]>arreglo[j+1]){
//guardamos el numero mayor en el auxiliar
aux=arreglo[j];
//guardamos el numero menor en el lugar correspondiente
arreglo[j]=arreglo[j+1];
//asignamos el auxiliar en el lugar correspondiente
arreglo[j+1]=aux;
}
}
return arreglo
}
Como utilizarlo
//arreglo a ordenar
var arregloAOrdenar=[1000,9,111,8,1,5,4,2,99,2,3];
//invocamos la función
arregloAOrdenar=burbuja(arregloAOrdenar);
//imprimimos para ver el resultado
alert(arregloAOrdenar)
En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.
Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.
Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.
Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:
El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada. En el siguiente código de javascript explico línea por línea que es lo que va haciendo:
function MensajeError(mensaje, time) {
//si no se envia la variable time, esta se define por defecto en 6 segundos
if (time === undefined) time = 6000;
//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
$("body").append("<div class='Error'></div>");
//asignamos el texto del error al div que creamos
$(".Error").html(mensaje);
//aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
$(".Error")
.animate({ //seleccionamos el div
opacity: 1 //aparece
}, 500 //la animación se realiza medio segundo
, function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
$(".Error").animate({ //seleccionamos nuevamente el div
opacity: 0 //ocultamos
}, time //tiempo de 6 segundos por defecto
, function () {
//al final en el callback del ultimo evento eliminamos el div de la pagina.
$(this).remove();
}
)
})
}
Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad. Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).