＜audio＞标签 “timeupdate“属性调用卡顿的问题记录

问题背景及描述

在用vue写网页播放器的时候用了隐藏<audio>+element-ui组件的组合方式，过程中需要实现播放时间的同步。
发现通过timeupdate事件处理相关逻辑会导致音频卡顿。

问题解决尝试

节流（不是问题根源）

通过节流来解决问题，以1s为长度

// 节流方法
timer(callback, time) {
	let clock = null;
	return function () {
		if (!clock) {
			clock = setTimeout(() => {
				callback();
				clock = null;
			}, time);
		}
	};
}
// 周期函数
mounted() {
    const self = this;
    this.$refs["audio"].addEventListener("timeupdate", this.timer(function () {
        self.playedTime = self.$refs["audio"].currentTime;
    }, 1000));
},

从问题本质入手（不是问题根源）

如下图所示，通过timeupdate返回值获取到的currentTime单位为秒，播放器需要的只是整数部分，这样就会存在重复的情况

// 通过html标签绑定的函数
timeupdate(e) {
   const time = Math.round(e.target.currentTime);
   if (this.lastTime != time) {
       this.playedTime = time;
       this.lastTime = time;
   }
},

发现问题根源

以上两种方法都没能实际解决问题，但是在调试过程中发现了问题的根源。

element-ui中的<el-slider`>有一个属性format-tooltip，会在滑块的值改变的时候调用，我使用它作为播放器的进度条，绑定上了会改变playedTime的逻辑，因此每次timeupdate触发时、format-tooltip绑定的事件也会触发，因此导致了播放出现问题。