js一个问题怎么解决

Question

updateTime: function () {
    // 监听音乐播放进度，实时更新
    audioContext.onTimeUpdate(() => {
      //设置滑块移动
      if (!this.data.isSliderMove) return; //flase时表明在手动移动滑块，不允许自动移动
      const currentTime = audioContext.currentTime * 1000;
      this.handleLyricShow(currentTime);  //更新歌词
      const sliderValue = (currentTime / this.data.durationTime) * 100;
      //设置实时播放时间
      this.setData({ sliderValue, currentTime });

    });
  },

  handleLyricShow(currentTime) {
    //处理应该在适当的时间显示适当的歌词
    const LyricTimeAndText = this.data.LyricTimeAndTextSplit;
    for (const singleLine of LyricTimeAndText) {
      let nextLineLyricTime = this.data.nextLineLyricTime;
      if (currentTime > nextLineLyricTime) {  //查看当前时间是否大于下一行歌词的时间
        const timestamp = singleLine.timestamp;
        if (currentTime < timestamp) {
          //从第一项开始匹配，如果当前时间小于歌词时间，则显示前一行歌词
          this.setData({ showLyric: singleLine.text }); //保存要显示的歌词
          console.log(singleLine.text,currentTime);
          this.setData({ nextLineLyricTime: timestamp }); //保存下一行歌词时间
        }
      }
    }
  },

执行慢了一步会丢失第一行的歌词，这种要怎么解决

Answer 1

不好解决不了，建议换个思路。
在我看来，这几件事之间其实没有依赖关系的：

1. 需要一个方法播放音乐，且允许从任意时长开始（指定时长>音频长度时取音频长度，小于0取0）
2. 根据当前播放的时长与音频长度显示一个进度比例
3. 根据当前播放的时长显示歌词
4. 有一个拖拽控制器，用户拖拽结束或点击后根据点击位置与拖拽器宽度的百分比计算期待的时间，并再次触发播放音乐的方法。

也就是1、4是由行为触发的，而2、3完全与用户无关。
所以，你可以认为2是一个背景，它不响应鼠标事件，而它上面隐藏着一个全透明的拖拽盒子，这个盒子只有开始拖拽时变成可见，它才响应鼠标事件。

这样你不需要去做当前是自由移动还是拖拽这种判断，同时你可以独立调试#3。

简而言之，在可能的情况下，尽量避免同一个东西即是输出也是输入。

Answer 2

@loser 楼主请教下，你的这个实时监听进度的这个方法是怎么实现的 ? 我看原生的 AudioContext 上面试没有这个方法的【 audioContext.onTimeUpdate 】。