javascript - 新编译的 React 应用程序符合预期，后续运行表现出意外行为

Question

我正在使用 React 为流行的排序算法创建一个可视化工具。该程序随机生成一个整数值数组，它在屏幕上表示为条形。条形越高，数字越高。条形图是随机排列的。可视化器对排序进行动画处理，以便查看者逐步了解算法的工作原理，直到所有条形图从最短到最高排序。我的问题出现在快速排序上。有时，程序正确执行并在算法终止时显示正确排序的条形图。其他时候，它没有。有时有一个不合适的酒吧，有时是两个或三个或四个。我检查了我的数组状态，它似乎已排序，让我相信这是一个动画问题。行为（数组的正确/错误显示）似乎是随机的。我发现的唯一一致性是，当我在 IDE 中对程序进行更改然后重新编译时，第一次运行总是成功（到目前为止，在第一次运行后始终错误地显示 4-6 条的数组上，8 为 8）。这里发生了什么？内存有什么问题吗？这是处理动画的函数。如果有帮助，我会附上排序功能和验证功能。

export const quickSortAnimations = animations => {
  const arrayBars = document.getElementsByClassName('array-bar');

  for(let i=0; i < animations.length; ++i){
    const {leftIdx, rightIdx, pivot, swap} = animations[i];
    const leftBarStyle = arrayBars[leftIdx].style;
    const rightBarStyle = arrayBars[rightIdx].style;
    const pivotBarStyle = arrayBars[pivot].style;
    setTimeout(() => {
      pivotBarStyle.backgroundColor = 'purple';
      leftBarStyle.backgroundColor = 'red';
      setTimeout(() => {
        leftBarStyle.backgroundColor = 'turquoise';
        if (swap){
          if(rightIdx === pivot) rightBarStyle.backgroundColor = 'turquoise';
          const tmpHeight = leftBarStyle.height;
          leftBarStyle.height = rightBarStyle.height;
          rightBarStyle.height = tmpHeight;
        }
      }, 2);
    }, i * 3);
  }
}

标签： javascriptreactjs