javascript - 使用嵌套的 setTimeout 创建动画选择排序

Question

我正在开发一个仅使用 HTML、CSS 和 JS 的基本排序可视化工具，但我遇到了动画方面的问题。为了初始化数组，我在某个指定范围内生成随机数并将它们推送到数组中。然后根据网页尺寸，我为每个元素创建 div，并相应地给每一个高度和宽度尺寸，并将每个附加到我当前在 dom 中的“bar-container”div。

function renderVisualizer() {
  var barContainer = document.getElementById("bar-container");

  //Empties bar-container div
  while (barContainer.hasChildNodes()) {
    barContainer.removeChild(barContainer.lastChild);
  }

  var heightMult = barContainer.offsetHeight / max_element;
  var temp = barContainer.offsetWidth / array.length;
  var barWidth = temp * 0.9;
  var margin = temp * 0.05;
  //Creating array element bars
  for (var i = 0; i < array.length; i++) {
    var arrayBar = document.createElement("div");
    arrayBar.className = "array-bar"
    if (barWidth > 30)
      arrayBar.textContent = array[i];
    //Style
    arrayBar.style.textAlign = "center";
    arrayBar.style.height = array[i] * heightMult + "px";
    arrayBar.style.width = barWidth;
    arrayBar.style.margin = margin;

    barContainer.appendChild(arrayBar);
  }
}

我编写了以下动画选择排序并且效果很好，但唯一的“动画”部分在外部 for 循环中，并且我在遍历它们时没有突出显示条形。

function selectionSortAnimated() {
  var barContainer = document.getElementById("bar-container");
  var barArr = barContainer.childNodes;
  for (let i = 0; i < barArr.length - 1; i++) {
    let min_idx = i;
    let minNum = parseInt(barArr[i].textContent);
    for (let j = i + 1; j < barArr.length; j++) {
      let jNum = parseInt(barArr[j].textContent, 10);
      if (jNum < minNum) {
        min_idx = j;
        minNum = jNum;
      }
    }
    //setTimeout(() => {   
    barContainer.insertBefore(barArr[i], barArr[min_idx])
    barContainer.insertBefore(barArr[min_idx], barArr[i]);
    //}, i * 500);
  }
}

我正在尝试使用嵌套的 setTimeout 调用在我遍历每个条形图时突出显示它，然后交换条形图，但我遇到了问题。我正在使用 idxContainer 对象来存储我的最小索引，但是在每次运行 innerLoopHelper 之后，它最终等于 i 因此没有交换。我被困在这里几个小时了，一头雾水。

function selectionSortTest() {
  var barContainer = document.getElementById("bar-container");
  var barArr = barContainer.childNodes;
  outerLoopHelper(0, barArr, barContainer);
  console.log(array);
}

function outerLoopHelper(i, barArr, barContainer) {
  if (i < array.length - 1) {
    setTimeout(() => {
      var idxContainer = {
        idx: i
      };
      innerLoopHelper(i + 1, idxContainer, barArr);
      console.log(idxContainer);
      let minIdx = idxContainer.idx;
      let temp = array[minIdx];
      array[minIdx] = array[i];
      array[i] = temp;

      barContainer.insertBefore(barArr[i], barArr[minIdx])
      barContainer.insertBefore(barArr[minIdx], barArr[i]);
      //console.log("Swapping indices: " + i + " and " + minIdx);
      outerLoopHelper(++i, barArr, barContainer);
    }, 100);
  }
}

function innerLoopHelper(j, idxContainer, barArr) {
  if (j < array.length) {
    setTimeout(() => {
      if (j - 1 >= 0)
        barArr[j - 1].style.backgroundColor = "gray";
      barArr[j].style.backgroundColor = "red";
      if (array[j] < array[idxContainer.idx])
        idxContainer.idx = j;
      innerLoopHelper(++j, idxContainer, barArr);
    }, 100);
  }
}

我知道这是一篇很长的文章，但我只想尽可能具体。非常感谢您的阅读，我们将不胜感激!

Answer 1

将排序函数转换为 generator function* ，这样，您可以在更新渲染时yield它:

const sorter = selectionSortAnimated();
const array = Array.from( { length: 100 }, ()=> Math.round(Math.random()*50));
const max_element = 50;
renderVisualizer();
anim();

// The animation loop
// simply calls itself until our generator function is done
function anim() {
  if( !sorter.next().done ) {
    // schedules callback to before the next screen refresh
    // usually 60FPS, it may vary from one monitor to an other
    requestAnimationFrame( anim );
    // you could also very well use setTimeout( anim, t );
  }
}
// Converted to a generator function
function* selectionSortAnimated() {
  const barContainer = document.getElementById("bar-container");
  const barArr = barContainer.children;
  for (let i = 0; i < barArr.length - 1; i++) {
    let min_idx = i;
    let minNum = parseInt(barArr[i].textContent);
    for (let j = i + 1; j < barArr.length; j++) {
      let jNum = parseInt(barArr[j].textContent, 10);
      if (jNum < minNum) {
        barArr[min_idx].classList.remove( 'selected' );
        min_idx = j;
        minNum = jNum;
        barArr[min_idx].classList.add( 'selected' );
      }
      // highlight
      barArr[j].classList.add( 'checking' );
      yield; // tell the outer world we are paused
      // once we start again
      barArr[j].classList.remove( 'checking' );
    }
    barArr[min_idx].classList.remove( 'selected' );
    barContainer.insertBefore(barArr[i], barArr[min_idx])
    barContainer.insertBefore(barArr[min_idx], barArr[i]);
    // pause here too?
    yield;
  }
}
// same as OP
function renderVisualizer() {
  const barContainer = document.getElementById("bar-container");

  //Empties bar-container div
  while (barContainer.hasChildNodes()) {
    barContainer.removeChild(barContainer.lastChild);
  }

  var heightMult = barContainer.offsetHeight / max_element;
  var temp = barContainer.offsetWidth / array.length;
  var barWidth = temp * 0.9;
  var margin = temp * 0.05;
  //Creating array element bars
  for (var i = 0; i < array.length; i++) {
    var arrayBar = document.createElement("div");
    arrayBar.className = "array-bar"
    if (barWidth > 30)
      arrayBar.textContent = array[i];
    //Style
    arrayBar.style.textAlign = "center";
    arrayBar.style.height = array[i] * heightMult + "px";
    arrayBar.style.width = barWidth;
    arrayBar.style.margin = margin;

    barContainer.appendChild(arrayBar);
  }
}

#bar-container {
  height: 250px;
  white-space: nowrap;
  width: 3500px;
}
.array-bar {
  border: 1px solid;
  width: 30px;
  display: inline-block;
  background-color: #00000022;
}
.checking {
  background-color: green;
}
.selected, .checking.selected {
  background-color: red;
}

<div id="bar-container"></div>