Визуализация алгоритма сортировки не работает

Question

Я пытаюсь создать веб-сайт, который показывает различные алгоритмы сортировки, представляя значения массива в виде столбцов и затем сортируя массив при обновлении представления.

У меня есть метод drawArray() который создает бары и добавляет их в мой content -див. Этот метод вызывается после каждого шага алгоритма сортировки, но он не показывает обновление на веб-сайте, вместо этого он просто обновляет представление после завершения алгоритма сортировки.

Я предполагаю, что там проблема с обновлением html из метода или чего-то еще, но я не нашел пути решения этой проблемы. Кто-нибудь знает, как я могу показать прогресс сортировки?

Это мой метод bubbleSort ():

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

с вызовом drawArray -метода после каждого шага.

Вот drawArray() -метод: он мог получить две переменные, но это было только для тестирования, метод выделил бы эти два элемента в другом цвете, но в обычном случае я просто передаю null поэтому они выглядят черными.

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

Это setDiv -метод, который вызывается из drawArray (), он просто изменяет высоту и цвет 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;");
}

Я благодарен за любую помощь:)

РЕДАКТИРОВАТЬ: Проблема, кажется, в том, что он работает слишком быстро, поэтому мне нужно отложить каждый шаг алгоритма сортировки. Как я могу это сделать?

Answer 1

Самый простой способ - использовать setTimeount и счетчик операций. Если вы хотите изменить массив шаг за шагом. Вы можете эмулировать для и во время интервала;

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