Estoy haciendo un programa que haga un ordenamiento y lo muestre en el canvas con lineas. El problema es que lo ejecuta de golpe aunque ya le hay puesto un setTimeout("FuncionDeDibujo()",1000). Simplemente no hace la pausa de 1seg. Ya intenté quitarle las comillas y ponerlo de manera distinta y nada y si lo dibuja pero de golpe. Quisiera saber que estoy haciendo mal. Adjunto codigo:
window.onload = function(){
var arreglo = new Array();
for(var i = 0; i < 24; i++ )
arreglo[i] = Math.round(10+Math.random()*100);
console.log(arreglo);
ordenamientoBurbuja(arreglo);
}
function showSort(arreglo){
var canvas = document.getElementById("canvas1");
if(canvas && canvas.getContext){
var ctx = canvas.getContext("2d");
if(ctx){
//LINEA
ctx.lineWidth = 20;
ctx.strokeStyle = "yellow";
var x = 0;
for(var i = 0; i < arreglo.length;i++){
ctx.beginPath();
ctx.moveTo(x,300);
ctx.lineTo(x,0+arreglo[i]);
ctx.stroke();
x+=21;
}
}
}
}
function ordenamientoBurbuja(arreglo){
for(var i = 0; i < arreglo.length-1;i++){
for( var j = i + 1;j < arreglo.length;j++){
if(arreglo[i] < arreglo[j]){
var aux = arreglo[i];
arreglo[i] = arreglo[j];
arreglo[j] = aux;
//showSort(arreglo);
window.setTimeout(showSort(arreglo),1000);
}
}
}
//console.log(arreglo);
}
Intenté ponerlo también dentro del window.onload inicial y nada. PD: Usé el método de la burbuja inicialmente porque es el mas sencillo y solo quiero que funcione en general para posteriormente ponerle los mas complejos.