实时视觉插入排序有间隙，输出有延迟

Question

好吧，我对 JS 比较陌生，但在 python 和 java 方面有丰富的经验。我的代码有两个问题需要帮助。首先这是我的代码的解释和背景。理想情况下，我想要最简单的结构化视觉排序程序，我可以将其用作我的编码进程的基础以供参考。我首先最大化一个容器 div，它用于填充 x 数量的 div .bars，div 的宽度和位置在插入时由 Flexbox 自动处理。每个添加的 div 的高度是随机生成的，并存储在每个单独的元素属性中。我已经完成了所有这些，很简单。然后我创建了一个元素交换器函数，可以交换 DOM 中的元素位置，效果非常好。现在回答我的问题。我希望看到元素在 for 循环迭代时实时排序，但直到循环结束它们才会更新。我找不到任何错误的插入算法也无法正常工作，但我不认为我的工作方法是错误的。任何帮助将不胜感激。对于其他人来说应该非常容易弄清楚。const sortDisplay = document.getElementById('sortDisplay');let resetbtn = document.querySelector('.reset');resetbtn.addEventListener('click', reset);let count = 0;let amount = 100;// create div that has custom attribute value, unique style tag, default bar style and append.function generateBar() {  // generate div  let bar = document.createElement('div');  // keep track of the total amount of bars  count++;  // assign random number 0-100 and setAttribute to the div  let temp = Math.floor(Math.random() * 101);  // create custom attribute that holds its value  bar.setAttribute('value', temp);  // create unique style tag with height as a percentage based on Attribute  let barHeight = document.createElement('style');  barHeight.innerHTML = `.barHeight${count} {height: ${temp}%;}`;  // add that unique style to the DOM  sortDisplay.appendChild(barHeight);  // now add that unique style to the div  bar.classList.add(`barHeight${count}`);  // use standard style from css as well  bar.classList.add('sortBar');  // now add that div to the DOM  sortDisplay.appendChild(bar);}// clear container div and regeneratefunction reset() {  // clear all data within the container  sortDisplay.innerHTML = '';  // reset the count  count = 0;  // generate k bars  for (let i = 0; i < amount; i++) {    generateBar();  }}

Answer 1

这个错误非常小：您正在比较字符串，而不是排序中的数字。添加数字转换：

if (+document.querySelectorAll('.sortBar')[j].getAttribute('value') < +document.querySelectorAll('.sortBar')[j-1].getAttribute('value')) {

作为字符串，例如"3" > "29".

可视化不是“实时可见”，因为代码完成得非常快，而且也没有释放控制并等待 DOM 重新渲染。强制 DOM 重新渲染存在一些小问题，但我认为这在这里并不重要。

要解决此问题，请在循环中添加延迟，这非常简单，您所需要的只是一个规范的延迟函数 ( const delay = ms => new Promise(res => setTimeout(res, ms));)，在( )async前面，以及交换之间的适当延迟 ( ，目前为 25 毫秒。确切的时间是不能保证，由于多种因素，例如一次可能需要 22 毫秒，下次需要 27 毫秒，但这并不是太重要）。sortasync function sortawait delay(DELAY_BETWEEN_SWAPS);

然而，这会导致取消问题：现在可以在排序仍在进行的情况下进行重置（异步性的困境）。因此，需要检查当前的排序是否被取消。因此，每个排序过程都需要一个取消令牌，当按下重置时，可以使用该取消令牌来停止旧的排序。最后但最重要的是，开始新的排序（只需按“按钮”），也会自动取消最后的排序。

请注意，我展示的是一些概念，但不一定是能够赢得美容奖的代码。我也不会改变任何“有效但我不会那样做”的东西——例如，我更喜欢画布而不是用大量的 DOM 更新来做动画。

工作版本：

const sortDisplay = document.getElementById('sortDisplay');

let resetbtn = document.querySelector('.reset');

resetbtn.addEventListener('click', reset);

const DELAY_BETWEEN_SWAPS = 25;

const delay = ms => new Promise(res => setTimeout(res, ms));

let cancelLast = () => {};

let count = 0;

let amount = 100;

// create div that has custom attribute value, unique style tag, default bar style and append.

function generateBar() {

  // generate div

  let bar = document.createElement('div');

  // keep track of the total amount of bars

  count++;

  // assign random number 0-100 and setAttribute to the div

  let temp = Math.floor(Math.random() * 101);

  // create custom attribute that holds its value

  bar.setAttribute('value', temp);

  // create unique style tag with height as a percentage based on Attribute

  let barHeight = document.createElement('style');

  barHeight.innerHTML = `.barHeight${count} {height: ${temp}%;}`;

  // add that unique style to the DOM

  sortDisplay.appendChild(barHeight);

  // now add that unique style to the div

  bar.classList.add(`barHeight${count}`);

  // use standard style from css as well

  bar.classList.add('sortBar');

  // now add that div to the DOM

  sortDisplay.appendChild(bar);

}

// clear container div and regenerate

function reset() {

  cancelLast();

  // clear all data within the container

  sortDisplay.innerHTML = '';

  // reset the count

  count = 0;

  // generate k bars

  for (let i = 0; i < amount; i++) {

    generateBar();

  }

}

// when page is loaded reset

reset(amount);

// swap elements within the DOM

function swapElements(obj1, obj2) {

  // create marker element and insert it above where obj1 is

  var temp = document.createElement("div");

  obj1.parentNode.insertBefore(temp, obj1);

  // move obj1 to right before obj2

  obj2.parentNode.insertBefore(obj1, obj2);

  // move obj2 to right before where obj1 used to be

  temp.parentNode.insertBefore(obj2, temp);

  // remove temporary marker node

  temp.parentNode.removeChild(temp);

}

// sort the divs within the DOM

async function sort(cancellationChecker) {

  for (let i = 1; i < amount; i++) {

    let j = i;

    for (j; j > 0; j--) {

      if (cancellationChecker()) return;

      if (+document.querySelectorAll('.sortBar')[j].getAttribute('value') < +document.querySelectorAll('.sortBar')[j-1].getAttribute('value')) {

        swapElements(document.querySelectorAll('.sortBar')[j], document.querySelectorAll('.sortBar')[j-1]);

        await delay(DELAY_BETWEEN_SWAPS);

      }

      else {

        break;

      }

    }

  }

}

function btnSort() {

  let cancelled = false;

  cancelLast();

  cancelLast = () => cancelled = true;

  sort(() => cancelled);

}

// Button to run the sort function

button = document.querySelector('.button');

button.addEventListener('click', btnSort);

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

body {

  height: 100vh;

  width: 100%;

}

.sortDisplay {

  background-color: #305c50;

  background-image: linear-gradient(28deg, #305c50 0%, #6ab19e 70%, #82d8a6 100%);

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  height: 100%;

  width: 100%;

  overflow: hidden;

}

.btn-container {

  position: absolute;

  right: 0;

  bottom: 0;

  margin: 25px;

}

.btn-container button {

  padding: 25px;

}

.sortBar {

  flex: 1;

  background-color: #0007;

}

<div class="btn-container">

  <button class="reset">reset</button>

  <button class="button">button</button>

</div>

<div id="sortDisplay"class="sortDisplay"></div>