基数排序中可视化第二次迭代的问题

Question

我正在创建一个排序可视化器项目。 目前我正在使用基数排序算法。 我将盒子的高度（排序项目以帮助可视化）限制为三位数。 这意味着基数排序有 3 次迭代（首先我们对单位位置进行排序，然后是数十和数百）。 当涉及到第二次迭代时，问题就出现了。 我控制台记录当前排序数组中项目的数字，它匹配它的高度，但颜色可能完全不同，不知道为什么会发生这种情况。 这是代码：

let sortingContainer = document.getElementById('sortingContainer')

const getDigit = (num, idx) => {
// Convert a number to string to know its length
let strNum = String(parseFloat(num.style.height))

let end = strNum.length - 1
let digit = strNum[end - idx]

if (digit === undefined) return '0'
return digit
}

const getDigitsNumber = (arr) => {
let largest = '0'

arr.forEach((num) => {
  let strNum = String(parseFloat(num.style.height))

  if (strNum.length > largest.length) {
    largest = strNum
  }
})

return largest.length
}

const changeBgColor = (item, digit) => {
  switch (digit) {
  case '0':
    item.style.background = 'crimson'
    break
  case '1':
    item.style.background = 'orange'
    break
  case '2':
    item.style.background = 'yellow'
    break
  case '3':
    item.style.background = 'green'
    break
  case '4':
    item.style.background = 'blue'
    break
  case '5':
    item.style.background = 'indigo'
    break
  case '6':
    item.style.background = 'brown'
    break
  case '7':
    item.style.background = 'turqoise'
    break
  case '8':
    item.style.background = 'gray'
    break
  case '9':
    item.style.background = 'black'
    break
  default:
    break
 }
}

const radixSort = async (arr) => {
  let maxDigits = getDigitsNumber(arr)

  for (let i = 0; i < maxDigits; i++) {
    let buckets = Array.from({ length: 10 }, () => [])
    for (let j = 0; j < arr.length; j++) {
      let digit = getDigit(arr[j], i)
      if (digit !== undefined) {
        buckets[digit].push(arr[j])
      }
    }

  arr = buckets.flat()

  // Update sorting container to change height of the items
  await new Promise((resolve) => {
    setTimeout(() => {
      arr.forEach((item) => {
        // Categorize and change background color of the item based on its current digit
        let digit = getDigit(item, i)
        changeBgColor(item, digit)
        sortingContainer.appendChild(item)
      })

      resolve()
    }, 3000)
  })
}

// Once array is sorted (end of external for loop) change color of the items
await new Promise((resolve) => {
  setTimeout(() => {
    arr.forEach((item) => (item.style.background = 'limegreen'))
    resolve()
  }, 2000)
})

return arr
}

export default radixSort

Arr 数组是从主文件填充的（它是对排序容器内项目的引用）。

这里是可视化。 第一次迭代很好

然后第二个被打破（蓝色，紫色和绿色）

有趣的是，最后一次迭代是正确的（红色项目的高度 < 100，橙色项目 100 < 200 等等）

Answer 1

问题是颜色名称。 而不是“绿松石”，它应该是“绿松石”。