javascript - 如何在 javascript 中为以下快速排序算法设置动画？

Question

我正在尝试学习更多关于一般编程和排序算法的知识，我想使用不同高度的 div 创建快速排序算法的动画。我已经创建了排序算法。运行代码片段将帮助您了解我正在尝试做什么。这是代码，但是排序完成后它只显示最终结果而不是整个过程:

function createColumns() {
  $('.column').remove();
  var content = $('#content');
  var columnNumber = $('input:text').val();
  var columnWidth = ((content.width() * 99 / 100) / columnNumber) + 'px';
  for (var i = 0; i < columnNumber; i++) {
    var randomColor = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
    var columnHeight = Math.floor(Math.random() * (columnNumber - 1)) + 1;
    $('<div/>', {
      'class': 'column'
    }).css({
      'height': columnHeight + 'px',
      'width': columnWidth,
      'background-color': randomColor
    }).appendTo(content);
  }
}


function quickSort(columns, left, right) {
  var index;
  if (columns.length > 1) {
    index = partition(columns, left, right);
    if (left < (index - 1)) {
      quickSort(columns, left, (index - 1));
    }
    if (index < right) {
      quickSort(columns, index, right);
    }
  }

  return columns;

}

function partition(columns, left, right) {
  var pivot = $(columns[Math.floor((right + left) / 2)]),
    i = left,
    j = right;
  while (i <= j) {
    while ($(columns[i]).height() < pivot.height()) {
      i++
    }
    while ($(columns[j]).height() > pivot.height()) {
      j--;
    }
    if (i <= j) {
      swap(columns, i, j);
      i++;
      j--;
    }
  }
  return i;
}

function swap(columns, firstIndex, secondIndex) {
  var temp, visualTemp;

  visualTemp = columns[secondIndex];
  $(columns[firstIndex]).insertAfter($(columns[secondIndex]));
  $(visualTemp).insertBefore($(columns[firstIndex + 1]));

  temp = columns[firstIndex];
  columns[firstIndex] = columns[secondIndex];
  columns[secondIndex] = temp;
}


$('input').change(function() {
  createColumns();
});

$('#quickSort').click(function() {
  var columns = $('.column');
  var left = 0,
    right = columns.length - 1;

  quickSort(columns, left, right);
});

createColumns();

body {
  padding: 2em;
}

#content {
  width: 100%;
  height: 200px;
  border: 2px solid black;
  position: relative;
  overflow: hidden;
}

.column {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number of columns: <input type="text" value="100" />
<div id="content">
</div>
<input type="button" id="quickSort" name="QuickSort" value="Quick Sort">

Answer 1

虽然它不是很生动，但如果您将 quickSort 函数的内部包装在 setTimeout 中并有一个小的延迟(我选择了 750 毫秒)以查看，您可以稍微减慢排序过程每一步。

function createColumns() {
  $('.column').remove();
  var content = $('#content');
  var columnNumber = $('input:text').val();
  var columnWidth = ((content.width() * 99 / 100) / columnNumber) + 'px';
  for (var i = 0; i < columnNumber; i++) {
    var randomColor = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
    var columnHeight = Math.floor(Math.random() * (columnNumber - 1)) + 1;
    $('<div/>', {
      'class': 'column'
    }).css({
      'height': columnHeight + 'px',
      'width': columnWidth,
      'background-color': randomColor
    }).appendTo(content);
  }
}


function quickSort(columns, left, right) {
  var index;

  setTimeout(function() {


    if (columns.length > 1) {
      index = partition(columns, left, right);
      if (left < (index - 1)) {

        quickSort(columns, left, (index - 1));
      }
      if (index < right) {
        quickSort(columns, index, right);
      }
    }

    return columns;
  }, 750);

}

function partition(columns, left, right) {
  var pivot = $(columns[Math.floor((right + left) / 2)]),
    i = left,
    j = right;
  while (i <= j) {
    while ($(columns[i]).height() < pivot.height()) {
      i++
    }
    while ($(columns[j]).height() > pivot.height()) {
      j--;
    }
    if (i <= j) {
      swap(columns, i, j);
      i++;
      j--;
    }
  }
  return i;
}

function swap(columns, firstIndex, secondIndex) {
  var temp, visualTemp;

  visualTemp = columns[secondIndex];
  $(columns[firstIndex]).insertAfter($(columns[secondIndex]));
  $(visualTemp).insertBefore($(columns[firstIndex + 1]));

  temp = columns[firstIndex];
  columns[firstIndex] = columns[secondIndex];
  columns[secondIndex] = temp;
}


$('input').change(function() {
  createColumns();
});

$('#quickSort').click(function() {
  var columns = $('.column');
  var left = 0,
    right = columns.length - 1;

  quickSort(columns, left, right);
});

createColumns();

body {
  padding: 2em;
}

#content {
  width: 100%;
  height: 200px;
  border: 2px solid black;
  position: relative;
  overflow: hidden;
}

.column {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number of columns: <input type="text" value="100" />
<div id="content">
</div>
<input type="button" id="quickSort" name="QuickSort" value="Quick Sort">