# Solution 1 :

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);
}
``````

# Problem :

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?

Just use

### Comment posted by Roman

Maybe it works too fast and you need a delay after each iteration.

### Comment posted by Nils

@Manikiran I added it and now it just instantly shows the result, but still not the steps, but I think it’s also working too fast.

### Comment posted by Nils

@Roman yes, I’m pretty sure that’s also a problem, which is why I tried using a way to delay every step, but I didn’t find a solution on how to do it since

### Comment posted by Nils

I tried a similar solution, but it isn’t working for me, because the setTimeout just delays the code inside (so the drawArray()) and not the execution of the sorting-algorithm, so the algorithm is finished before the first drawArray() is invoked.