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() 。 根据您的喜好将其取出或留在其中。