audio 设置了currentTime后为什么会卡顿？

Question

代码如下：

<mu-slider v-bind:value="progressPercent" @input="editprogress" class="demo-slider"/>

methods:{

    

    editprogress(value){

      this.demoSlider=value;

      this.$store.commit('editProgress',this.demoSlider)

    }

  }

editProgress(state,progressValue){

        const playerBar=document.getElementById("playerBar");

        

        let currentTime=playerBar.duration*(progressValue/100);

        // 清除下行代码即不再卡顿;

        playerBar.currentTime=currentTime;

        let duraTime=playerBar.duration-playerBar.currentTime

        let duraMinute=Math.floor(duraTime/60)+":"+(duraTime%60/100).toFixed(2).slice(-2);

        let currentMinute=Math.floor(playerBar.currentTime/60)+":"+(playerBar.currentTime%60/100).toFixed(2).slice(-2);

        state.audio.currentTime=currentMinute;

    }

这是一个播放器的进度条，用的是muse-ui的组件，当拖动播放条时调整音频进度，代码可以运行，唯一的问题就是音频卡顿，经过验证，清除设置currentTime（见第三段代码）就不卡了。

请教大神是什么原因？PS:chrome浏览器,safari已测试，均卡顿。

Answer 1

跟muse-ui有关，提供了两个方法：@input和@change，作用的条件不一样，估计是input只要有变化就会触发，而change只会作用于手动拖动或点击。解决方法：替换input为change即可。