音乐播放拖动滚动条后会回弹下，怎么解决这个问题

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

 var startPosition = 0
 var curPostion = 0
 var process_bar = document.querySelector('#barbg')
 var process_move = document.querySelector('#auto-id')
 var start = 0
 var prassCur = document.querySelector('.cur')
 // 移动进度条执行事物
 var listen = function(e) {
     var now = ((e.clientX - start) / 493)* 100
     now = now + passC
     now = Math.min(now, 100)
     // console.log('e.clcient', typeof(e.clientX), typeof(passC), typeof(start))
     prassCur.style.width =`${now}%`
     curPostion = audio.duration * now * 0.01
 }
 // 开始移动进度条执行事物
 var dragst = function(clientx, prassCur, start) {
     var now = ((clientx - start) / 493)* 100
     prassCur.style.width =`${now}%`
 }
 // 获取播放进度
 var passCur = function() {
     var prassCur = document.querySelector('.cur')
     var startCur = prassCur.style.width
     var startNow = startCur.slice(0, startCur.length - 1)
     var startNum = (parseFloat(startNow) / 100) * 493
     return parseFloat(startNow)
 }
 // 移动结束执行事物
 var dragen = function() {
     var proc_now = document.querySelector('.cur')
     audio.currentTime = curPostion
     var prec11 = curPostion / audio.duration
     console.log('prec11', prec11)
     var prec1 = prec11 * 100
     proc_now.style.width = `${prec1}%`
     document.removeEventListener('mousemove', listen)
     document.removeEventListener('mouseup', dragen)
     console.log('mouseUp')
 }
 var passC = 0
 this.isDragging = false
 // 滑动控制播放进度

var dragEvent = function(){

   process_move.addEventListener('mousedown', function(e) {
       e.stopPropagation()
       start = e.clientX
       console.log('mousedown eclienx', e.clientX)
       passC = passCur()
       var prassCur = document.querySelector('.cur')
       document.addEventListener('mousemove', listen)
       document.addEventListener('mouseup', dragen)
   })
 }

你期待的结果是什么？实际看到的错误信息又是什么？

滑动条能友好地滑动 实际情况是滑动后进度条快速弹回原进度再快速弹到移动到的位置处

Answer 1

添加一个 progress_Lock 变量，作为一个锁

let progress_Lock  = false; //初始不锁定

onMouseDrag(){
    progress_Lock  = true;
    //锁定 进度
    // TODO ： 移动进度条 
    // TODO ： 调用修改duration ,修改进度完毕以后才可以把Lock置为true
}


AutoMoveProgress(){
    if(progress_Lock){return;}
    //
    
}

大概这个意思