实现cloud_music项目反馈歌曲播放进度时间功能

实现网易云项目反馈歌曲播放进度时间功能

一、实现原理

• 计时器setTimeout包装成setInterval
• 放计时器与清楚计时器时候的数据
• 全局状态管理来记录当前播放的值
• 播放/暂停/切换播放的时候的行为

二、具体实现步骤

2.1 计时器setTimeout包装成setInterval

/**
 * @param { Function } callback // 回调触发的函数
 * @param { Number } delay // 设置计时器延迟的时间
 * @param { Array } timerId // 存放计时器的数组, 用数组是因为其引用类型,可以把实参地址传入形参, 为什么用数组因为操作方便
 */
function _setInterval (callback, delay = 1000, timerId) {
  // 若timerId本身存在计时器则清空
  while (timerId.length) {
    clearTimeout(timerId[0])
    timerId.shift()
  }
  // 定义循环的函数
  function fn () {
    callback()
    const prevTimerId = timerId[0]
    clearTimeout(prevTimerId)
    while (timerId.length) {
      timerId.shift()
    }
    timerId.push(setTimeout(fn, delay))
  }
  // 触发
  timerId.push(setTimeout(fn, delay))
}

2.2 放计时器与清楚计时器时候的数据

• Vue.prototype.$timerId = []
• 选择放在Vue的属性中

2.3 全局状态管理来记录当前播放的值

• state 里面存放一个currentTime来记录
• mutations中的代码

[types.ADD_TIMER] (state) {
  state.playInfo.currentTime++
}

2.4 播放/暂停/切换播放的时候的行为

• 播放的时候重新开启加速器
• 暂停的时候clear掉加速器
• 切换的时候把currentTime设置为0