如何在 JavaScript 中创建实时更改

Question

所以我写了一个非常基本的代码。我是一个真正的菜鸟。 JavaScript 3 天前开始。我希望在排序过程中可视化排序过程。但是当排序按钮在一段时间后被点击时，排序的数组就会显示出来。但我想要的是实时显示数组发生的变化。请帮帮我。

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 个主要函数和 3 个辅助函数）。

runSort 是使用所有其他辅助函数完成所有操作的主要函数。

makeArrayAndUnsyncedBars 生成随机数组和基本 div，您将用作绿色 "bars"，但它不会根据数组中的值设置这些 div 的高度。

syncArrayToBars根据数组

中的值设置这些"bar"个div的高度

sortUntilNextSwap 对数组进行排序，直到发生交换或排序完成。此函数 returns 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() 这里并不是非常必要反正很少。随你喜欢取出还是留在里面。

如何在 JavaScript 中创建实时更改

How to create real-time changes in JavaScript

javascript

jquery

sorting

visualizer