实现一个小玩意

不知道在哪里看到的一种在页面点击就会出现字符慢慢消失的小东西
大概是这种， 我也实现了一下

源码

// 获取不同的字体颜色
function generateColorWrap () {
  const colors = [
    'rgb(37, 116, 92)',
    'rgb(71, 100, 133)',
    'rgb(90, 71, 133)',
    'rgb(161, 29, 51)',
    'rgb(161, 77, 29)',
    'rgb(153, 119, 99)',
    'rgb(38, 104, 134)',
    'rgb(102, 123, 133)'
  ]
  const getColorIndex = diffPre(colors.length, 0)
  return () => colors[getColorIndex()]
}
const generateColor = generateColorWrap()
// 获取不同的内容
function generateTextWrap () {
  const texts = [
    '富强',
    '民主',
    '文明',
    '和谐',
    '善良',
    '谦恭',
    '勤俭',
    '礼让'
  ]
  let getTextIndex = diffPre(texts.length, 0)
  return () => texts[getTextIndex()]
}
const generateText = generateTextWrap()

// 用来保证字体颜色，或者内容不与上次的内容相同
function diffPre(max, min) {
  let pre = 0
  // 获取范围内的随机数
  function getRandom (max, min) {
    const aNumber = (max - min) * Math.random() + min
    return Math.floor(aNumber)
  }
  return function getNext() {
    const curr = getRandom (max, min)
    if (curr === pre) {
      return getNext()
    } else {
      pre = curr
      return curr
    }
  }
}

// 使用CSS过度来达到动画效果
function generateStyleWrap () {
  const initStyle = {
    position: 'fixed',
    transform: 'translate(-50%, -100%)',
    transition: 'all 1.5s ease-in-out',
    opacity: 1,
  }
  return function(px, py) {
      const beforeStyles = {
      top: `${py}px`,
      left: `${px}px`,
      color: generateColor(),
      ...initStyle
    }

    const afterStyles = {
      ...beforeStyles,
      opacity: 0,
      transform: 'translate(-50%, -200px)'
    }
    function createStyleString (styleObj) {
      return Object.keys(styleObj).reduce((pre, curr, i) => {
        const result = `${curr}: ${styleObj[curr]}`
        return i ? `${pre};${result}` : result
      }, '')
    }
    return {
      before: createStyleString(beforeStyles),
      after: createStyleString(afterStyles)
    }
  }
}
const generateStyle = generateStyleWrap()

// 处理样式问题
function dealStyle (toy, px, py, callback) {
  const { before, after } = generateStyle(px, py)

  toy.innerHTML = `❤ ${generateText()} ❤`
  toy.setAttribute('style', before)
  document.body.appendChild(toy)

  // 知道这个地方为什么使用setTimeout而不是Promise吗?
  setTimeout(() => {
    toy.setAttribute('style', after)
    setTimeout(() => {
      callback(document.body.removeChild(toy))
    }, 2000)
  }, 0)
}


// 创建一个动画元素
function createToy () {
  const eleList = []

  const getToy = () => {
    const ele = eleList.pop()
    return ele || document.createElement('span')
  }

  const recoveryToy = (toy) => {
    if (eleList.length >= 10) {
      toy = null
      return
    }
    toy.setAttribute('style', '')
    eleList.push(toy)
  }

  return {
    getToy,
    recoveryToy
  }
}

// 使用window时间绑定想要交互的事件
function showToy (e) {
  const x = e.clientX
  const y = e.clientY
  const { getToy, recoveryToy } = createToy()
  dealStyle(getToy(), x, y, recoveryToy)
}

window.addEventListener('click', showToy)

问题： 知道图中的一处代码为什么不用Promise而要使用setTimeout吗？？？
我知道， 可是我不说！