Adding timeout in loop to show changes in canvas

Question

I want to visualize bubble sort in a html canvas. I got the array generation, the sorting and the drawing set up and working.

I am struggling to add a timeout between each comparison in bubble sort and drawing the result for each iteration.

var number;
var cwidth = 500;
var cheight = 400;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


function createArray() {
// var num = parseInt(document.getElementById('textInput').value);
   var num = 10;
    number = [...Array(num)].map(() => Math.floor(Math.random() * 100));
    drawArray(number);
}

function drawArray(number) {
    ctx.clearRect(0, 0, cwidth, cheight);
    for (var i = 0; i < number.length; i++) {
        ctx.beginPath();
        ctx.fillStyle = "#0000cc";
        ctx.fillRect((i * 15), 390, 10, ((number[i]) * -1));
        ctx.stroke();
    }
}

function sortArray() {
    for (var i = 0; i < number.length - 1; i++) {
        for (var j = 0; j < number.length - 1 - i; j++) {

            if (number[j] > number[j + 1]) {
                var s = number[j];
                number[j] = number[j + 1];
                number[j + 1] = s;
            }
            // Draw new array for each iteration then wait amount x of time
        }
    }
    drawArray(number);
}

how do you mean you are struggling, you are not showing any timeout implementation in your code... — EugenSunic, Nov 01 '20 at 21:35
setting time out should be as simple as `setTimeout(()=>{what_to_do}, 1000)` this will wait 1 second prior to executing the `what_to_do` block. More information here: https://www.w3schools.com/jsref/met_win_settimeout.asp — lbragile, Nov 01 '20 at 21:37

score 0 · Answer 1 · answered Nov 01 '20 at 22:22

I rewrite the code to allow me to use setTimeout. So now it is a reccursive one, sorry about that.

I also changed the display to check what I was doing.

So you will have a little delay between display everytime there is a change, you can adapt if you want to wait between each iteration.

function createArray(length) {
    return Array(length).fill(0) .map( () => Math.floor(Math.random() * 100));
}

function drawArray(iter, array) {
    console.log(iter, '::', array.join(' '));
}

function iterate(array, iteration=0, i=0) {
   //We are at the last iteration
   if( iteration >= array.length ) {
      console.log('End');
      return;
   }

   //We are on the last index to work on
   if( i >= array.length - iteration -1 ) {
      iterate(array, iteration + 1, 0);   
      return;
   }

   const changementNeeded = array[i] > array[i + 1];
   //We swap, if needed, elem at i with elem at i+1
   if (changementNeeded) {
      var s = array[i];
      array[i] = array[i + 1];
      array[i + 1] = s;

      drawArray(iteration, array);
      setTimeout( () => {
         iterate(array, iteration, i+1);
      }, timeout);

   } else {
      iterate(array, iteration, i+1);
   }
}

const timeout = 100;
const array = createArray(10)

drawArray('init', array);
iterate(array);

Adding timeout in loop to show changes in canvas

1 Answers1