一块学Vue:学习日记 - 利用Vue实现冒泡排序的过程展示器_第一次优化

前言

  前面已经搞定了这个冒泡排序过程展示器的基础功能。详见：
  一块学Vue:学习日记_2020.1.4 - 利用Vue实现冒泡排序的过程展示器https://blog.csdn.net/qq493919692/article/details/103800727
  虽然已经算是能完成我们的需求了，但是使用的时候体验极差，前文在最后也列举了一些需要优化的问题。
  本文就是介绍怎么解决这些问题。

1.问题分析&解决

前文列举出来的问题有三个。
问题1：
  runRound()和runBubbleSort()因为没有设置延迟，所以点击之后，直接把最终结果呈现出来了，中间过程全部跳过。
  这里就得看需求了，需不需要中间的过程，需要的话，我们还需要去设置延迟。
问题2：
  按照逻辑来讲，GoToNext按钮必须在Compare按钮点击之后才可以点击。
  GoToNextRound按钮必须在RunRound按钮点击之后，或者这轮最后一次compare()方法执行之后才可以点击。
  对这两个按钮，我们也需要做一定的操作限制。
问题3：
  使用的舒适度还欠佳。实际使用的时候，不能返回上一步，也不能重置数组，这就会使得操作失误的时候，想要重归正轨就很麻烦。
  数组数据也还不能在网页上自定义改动，不够灵活。

1.1 问题1：未设置延迟

需求：假设，我们的需求就是点击runRound()或runBubbleSort()后，能像看动画一样看着数组一步一步自动完成相应操作。

所需数据：
  setTimerRound – Number变量，用于存储runRound()中需要使用到的setTimeout的id，初始值为NaN。
  setTimerBubbleSort – Number变量，用于存储runBubbleSort()中需要使用到的setTimeout的id，初始值为NaN。

实现方法分析：
  想要让runRound()或runBubbleSort()的过程逐步进行，最简单的方法就是使用setTimeout来设置延迟，模拟动画的效果。
  先说runRound()该如何实现。
  runRound()要完成的操作是compare() => goToNext() => compare() => goToNext() => … 直到游标到了倒数第二个数，再执行一次compare()。本来我们使用while循环来实现，现在有了setTimeout的加入，while循环就可以改成if判定语句。
  假设，我们想要每个步骤执行完后要停留一秒，再执行下一步。

JS改动：