Как я могу создать явное ожидание в Javascript, чтобы визуализировать внутреннюю работу функции?

Question

Я создаю визуализатор сортировки, используя Vue в качестве интерфейса. Я определил несколько функций сортировки следующим образом:

async insertionSort() {
      this.algorithmRunning = true; // trying to make this false from outside to stop further execution
      let n = this.arrayToSort.length;
      for (let i = 1; i < n; ++i) {
        for (let j = i - 1; j >= 0; --j) {
          this.$set(this.arrayToSort[j], "color", this.colorOfCurrentActiveBar);
          this.$set(
            this.arrayToSort[j + 1],
            "color",
            this.colorOfCurrentInactiveBar
          );
          await new Promise(r =>
            setTimeout(
              r,
              this.minSortingSpeed + this.maxSortingSpeed - this.sortingSpeed
            )
          );
          if (this.arrayToSort[j].value > this.arrayToSort[j + 1].value) {
            let temp = this.arrayToSort[j];
            this.$set(this.arrayToSort, j, this.arrayToSort[j + 1]);
            this.$set(this.arrayToSort, j + 1, temp);
          } else {
            this.$set(this.arrayToSort[j], "color", this.colorOfDefaultBar);
            this.$set(this.arrayToSort[j + 1], "color", this.colorOfDefaultBar);
            break;
          }
          this.$set(this.arrayToSort[j], "color", this.colorOfDefaultBar);
          this.$set(this.arrayToSort[j + 1], "color", this.colorOfDefaultBar);
        }
      }
      this.algorithmRunning = false;
    }

Мне пришлось сделать функции асинхронными и добавить Promise. Это должно было задержать выполнение оператора if, после чего положение и цвет полосок будут обновлены, чтобы пользователь мог видеть, как работают функции.

Однако этот подход создает две проблемы:

1. Прерывание обещания: я не могу найти никакого решения относительно того, как я могу прервать обещание в случае, если пользователь выберет другой алгоритм сортировки, который заставит оба алгоритма работать вместе, поскольку они оба асинхронны.
2. Рекурсивные алгоритмы : В таких случаях, как сортировка слиянием или быстрая сортировка, когда требуется рекурсия или задействованы несколько функций, вызывающих друг друга, это дает непредсказуемые результаты. См. Реализацию быстрой сортировки ниже (наивно, выбирает последний индекс в качестве точки поворота).

partitionForQuickSort(start, end) {
      let pivot = end;
      let partitionIndex = start;
      for (let i = start; i < end; ++i) {
        if (this.arrayToSort[i].value <= this.arrayToSort[pivot].value) {
          let temp = this.arrayToSort[i];
          this.$set(this.arrayToSort, i, this.arrayToSort[partitionIndex]);
          this.$set(this.arrayToSort, partitionIndex, temp);
          partitionIndex++;
        }
      }
      let temp = this.arrayToSort[end];
      this.$set(this.arrayToSort, end, this.arrayToSort[partitionIndex]);
      this.$set(this.arrayToSort, partitionIndex, temp);
      return partitionIndex;
    },

    quickSortUtil(start, end) {
      if (start < end) {
        let partitionIndex = this.partitionForQuickSort(start, end);
        this.quickSortUtil(start, partitionIndex - 1);
        this.quickSortUtil(partitionIndex + 1, end);
      }
    },

    quickSort() {
      this.algorithmRunning = true;
      this.quickSortUtil(0, this.arrayToSort.length - 1);
      this.algorithmRunning = false;
    }

Добавление обещания, такого как явное ожидание, в функцию секционирования не работает ожидаемым образом. Я много искал, как мы можем добавить этот период ожидания, но это было решение, которое ближе всего соответствовало моим потребностям, но оно не кажется сломанным.

Есть ли способ исправить эти 2 проблемы или альтернативный подход для реализации времени ожидания, которое я не вижу?