The simplest way is using setTimeount and operation counter. If you want to change array step by step. You can emulate for and while in interval;

var bubbleSort = function () {
    var n = array.length;
    var timeout = 1000;
    var swapped = false;
    var i = 0;
    var interval = setInterval(function() {
        if (i >= n - 1) {
            n--;
            if (n === 1 || !swapped) {
                clearInterval(interval);
                return;
            }
            swapped = false;
            i = 0;
        }
        if (array[i] > array[i + 1]) {
            var temp = array[i];
            array[i] = array[i + 1];
            array[i + 1] = temp;
            swapped = true;
        }
        drawArray(null, null);
        i++;
    }, timeout);
}

I am trying to create a website which shows different sorting-algorithms by presenting the values of the array as bars and then sorting the array while updating the view.

I’ve got a method drawArray() which creats the bars and appends them to my content-div.
This method is called after every step of the sorting-algorithm, but it isn’t showing the update on the website, instead, it just updates the view, when the sorting-algorithm is finished.

I assume there is an issue with updating the html from within a method or something, but I haven’t figured out a way around this problem. Does anybody know how I could show the progress of the sorting?

This is my bubbleSort()-method:

var bubbleSort = function () {
    var n = array.length;
    do {
        swapped = false;
        for (var i = 0; i < n - 1; i++) {
            if (array[i] > array[i + 1]) {
                var temp = array[i];
                array[i] = array[i + 1];
                array[i + 1] = temp;
                swapped = true;
            }
            drawArray(null, null);
        }
        n = n - 1;
    } while (swapped)
}

with the drawArray-method call after each step.

Here is the drawArray()-method:
It could get two variables but this was only for testing, the method would highlight these two divs in a different color, but in the normal case, I just pass null so they appear black.

var drawArray = function (num1, num2) {
    document.getElementById('content').innerHTML = '';
    for (var i = 0; i < array.length; i++) {
        document.getElementById('content').appendChild(divs[i]);
        if (num1 == array[i]) {
            setDiv(divs[i], array[i], "red");
        } else {
            if (num2 == array[i]) {
                setDiv(divs[i], array[i], "blue");
            } else {
                setDiv(divs[i], array[i], "black");
            }
        }
    }
}

This is the setDiv-method which is called inside drawArray(), it basically just changes the height and color of the div:

var setDiv = function (div, height, farbe) {
   div.setAttribute('style', "color: white; font-family: Arial; height: " +
   height + "px; width: 10px; background-color: " + farbe + "; margin-left: 2px;
   margin-right: 5px; display: inline-block; vertical-align: top;");
}

I am thankful for every help 🙂

EDIT: The problem seems to be that it is working too fast, so I need to delay each step of the sorting-algorithm. How can I do that?