重新呈现页面以可视化quicksort？

Question

我想使用不同高度的垂直条直观地显示快速排序，其中条的高度根据算法不断变化。

如果我使用不带setInterval的快速​​排序功能，其中仅显示最终的排序结果，则它工作正常。版本如下。

function f(e) {
  initializeBlock()
  quicksort(0, n-1)
}

function quicksort(p, r){
  if (p < r){
    pivot = bars[r].offsetHeight
    var i = p - 1
    var j = p
    for (j = p; j < r; j++){
      if (bars[j].offsetHeight <= pivot) {
        i++
        temp = bars[i].offsetHeight
        bars[i].style.height = bars[j].offsetHeight + "px"
        bars[j].style.height = temp + "px"
      }
    }
    i++
    temp = bars[i].offsetHeight
    bars[i].style.height = bars[r].offsetHeight + "px"
    bars[r].style.height = temp + "px"
    quicksort(p, i-1)
    quicksort(i+1, r)
  }
}

对该函数的调用类似于：

goBtn.addEventListener('click', f)

如果将setInterval与quicksort函数一起使用来实际显示正在发生的quicksort，则显示的结果是不正确的，即条高度仅部分排序。版本如下。

function g(e){
  initializeBlock()
  quicksortWithInterval(0, n-1)
}

function quicksortWithInterval(p, r){
  if (p < r){
    pivot = bars[r].offsetHeight
    var i = p - 1
    var j = p
    var iId = setInterval(
      function() {
        if (bars[j].offsetHeight <= pivot) {
          i++
          temp = bars[i].offsetHeight
          bars[i].style.height = bars[j].offsetHeight + "px"
          bars[j].style.height = temp + "px"
        }
        if (++j == r) {
          clearInterval(iId)
          i++
          temp = bars[i].offsetHeight
          bars[i].style.height = bars[r].offsetHeight + "px"
          bars[r].style.height = temp + "px"
          quicksortWithInterval(p, i-1)
          quicksortWithInterval(i+1, r)
        }
    }, 1)
  }
}

对该函数的调用类似于：

goBtn.addEventListener('click', f)

我不太确定为什么会这样，因为递归quicksort调用位于独立的集合上吗？请在这里帮助澄清问题。