divの幅が前の幅と現在の幅の間でちらつく

Question

私はSoundCloudに似たオーディオスライダ（トラックをスクラブできるようにするスライダー）を開発しました。を除いて、すべてが完全に動作します ; は、前の再生トラックの幅[/時間]と現在再生中のトラックとの間で前後に揺れるです。

これはなぜ起こっているのか、私はまったく考えていないし、かなりの間それを困惑しています。

ですJavaScriptの & のjQueryの私の現在のブロック：私はあなたのすべての並べ替えを願っています

<!-- play or pause track button !--> 
<div onclick="trackToSlider(wave);"></div> 

<!-- the audio slider which keeps on flickering !--> 
<div class="audio-slider-container"> 
    <div id="outer-slider"> 
     <div id="inner-slider"></div> 
    </div> 
</div> 

：ここ

function trackToSlider(wave){ 
    // get the duration of current playing song 
    var waveDuration = wave.getDuration(); 

    // check every 0.1s how far in the song is 
    var getWidthAndMax = setInterval(function(){ 
     // currentWidth is the current percentage of the width of the slider from 100% 
     var currentWidth = (wave.getCurrentTime()/waveDuration) * 100; 

     makeSliderIncrease(currentWidth, waveDuration); 
    }, 100); 

    function makeSliderIncrease(currentWidth, maxWidth){ 
     // if the current time is more than or equal to the songs duration, set the width of the slider to 100% and clear the interval 
     if(currentWidth >= maxWidth){ 
      clearInterval(getWidthAndMax); 
      $('#inner-slider').css('width', '100%'); 
     // otherwise set the width percentage equal to currentwidth 
     } else { 
      $('#inner-slider').css('width', currentWidth + '%'); 
     } 
    } 
} 

は私の HTML内部 相対要素であり、私は現在どこにいるのか理解しています。私はすべてを理解しやすくするためにコメントしようとしました。

新しいトラックが新しい幅を設定しようとしたときに次のトラックに移動する前に既に幅が設定されているため、2つの幅の間を一貫してフリックしていますが、 。

すべての助力や提案がありがとうございます。

ありがとうございます。 :-)

Answer 1

私はあなたがすべてのトラックに同じdivを使用するビーコンだと思います。私の前提は、clearInterval関数はwaveのcurrentWidthをリセットし、tracktoSliderを2度呼び出すことによって0に戻すというものです。しかし、それは私が与えられたコードに基づいて言うことができるすべてです。新しいトラックを開始するたびに＃inner-sliderをhtmlに追加し、トラックが終了するたびに削除してください。