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

Question

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

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 数组是从主文件中填充的（它是对排序容器内项目的引用）。

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

然后第二个坏了（蓝紫绿）

有趣的是，最后一次迭代是正确的（红色项目的高度

Answer 1

问题在于颜色名称。而不是“turqoise”，应该是“turquoise”。