JavaScript中如何創建實時變化

Question

所以我寫了一個非常基本的代碼。 我是一個真正的菜鳥。 3 天前開始 JavaScript。 我希望在排序過程中可視化排序過程。 但是當排序按鈕在一段時間后被點擊時，排序的數組就會顯示出來。 但我想要的是實時顯示數組發生的變化。 請幫幫我。

var array = [];
container_content= "";
for (var i=0; i < 50; i++) {
    array.push(Math.random() *500)
} 

container_content = "";

function myFunction(element) {
    container_content += '<div class="array-bar"></div>';
}
array.forEach(myFunction);
$(".container").html(container_content);

function another(element, index){
    element.style.height = array[index]
}
$( "div" ).each( function( index, element ){
    $( this ).css('height', array[index]);
});

$('button').click(function(){
    var i, j, temp;
    for(i = 0; i < array.length; i++)
    {
        for(j = 0; j < array.length-1; j++)
        {
            if( array[j] > array[j+1])
            {
                // swap the elements
                temp = array[j];
                array[j] = array[j+1];
                array[j+1] = temp;
            } 
        }
            $( "div" ).each( function( index, element ){
            $( this ).css('height', array[index]);
            });

    }

})

Answer 1

我把你想做的事情分解成 4 個基本函數（1 個主要的 function 和 3 個輔助函數）。

runSort是主要的 function，它使用所有其他輔助函數來完成所有操作。

makeArrayAndUnsyncedBars生成您將用作綠色“條”的隨機數組和基本 div，但它不會根據數組中的值設置這些 div 的高度。

syncArrayToBars根據數組中的值設置這些“bar”div 的高度

sortUntilNextSwap對數組進行排序，直到發生交換或排序完成。 如果這個 function 進行了交換（意味着它仍在通過數組工作），則返回false ，否則返回true 。

 var FRAMES_PER_SECOND = 50; var sortInterval = null; function runSort() { clearInterval(sortInterval); makeArrayAndUnsyncedBars(50); syncArrayToBars(); sortInterval = setInterval(function() { var finishedSorting = sortUntilNextSwap(); syncArrayToBars(); if (finishedSorting) clearInterval(sortInterval); }, Math.round(1000 / FRAMES_PER_SECOND)); } var array = []; function makeArrayAndUnsyncedBars(numberOfValues) { var htmlToAdd = ""; array = []; for (var i = 0; i < numberOfValues; i++) { htmlToAdd += "<div class=\"bar\"></div>"; array.push(rando(150)); } $("#bars").html(htmlToAdd); } function syncArrayToBars() { for (var i = 0; i < array.length; i++) $(".bar").eq(i).css({ height: array[i] + "px" }); } var i, j, temp; function sortUntilNextSwap() { for (i = 0; i < array.length; i++) { for (j = 0; j < array.length - 1; j++) { if (array[j] > array[j + 1]) { // swap the elements temp = array[j]; array[j] = array[j + 1]; array[j + 1] = temp; return false; } } } return true; }

 .bar { width: 5px; background: #5aedab; border-radius: 3px; display: inline-block; margin: 0px 3px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://randojs.com/1.0.0.js"></script> <div id="bars"></div> <button onclick="runSort();">Run sort</button>

編輯：我應該提到我出於習慣使用rando.js來獲得隨機性，但這里並不是非常必要，因為您無論如何都很少使用Math.random() 。 根據您的喜好將其取出或留在其中。