Breite der div zwischen der vorherigen Breite und aktuellen Breite flackern

Question

Ich habe einen Audio-Schieberegler entwickelt (der Schieberegler unten, die Sie durch die Spur scrubben) ähnlich SoundCloud, und es funktioniert alles einwandfrei, außer für eine Sache ; Es flackert hin und her zwischen der Breite [/ time] des vorherigen spielenden Titels und dem aktuellen spielenden Titel.

Ich habe keine Ahnung, warum das so ist und bin schon eine ganze Weile darüber gestolpert.

Dies ist meine aktuellen Block von JavaScript & jQuery:

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 + '%'); 
     } 
    } 
} 

Hier sind die relativ Elemente in meinem HTML:

<!-- 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> 

Ich hoffe, Sie alle Art zu verstehen, wo ich gerade bin. Ich habe versucht, alles zu kommentieren, um es leichter zu verstehen.

Ich glaube, das Problem ist, dass, weil es eine Breite bereits eingestellt hat, bevor es auf die nächste Spur bewegt, wenn die neue Spur versucht, die neue Breite einzustellen, es zwischen den beiden Breiten konsequent, aber ich könnte falsch liegen .

Alle Hilfe oder Vorschläge sind willkommen,

Vielen Dank. :-)

Answer 1

Ich denke, es ist beacouse Sie verwenden das gleiche div für jeden Titel. Meine Annahme ist, dass Ihre ClearInterval-Funktion die aktuelleWeite der Welle zurücksetzt und sie zu 0 zurückkehrt, indem sie zweimal tripttoSlider aufruft. Aber das ist alles, was ich basierend auf dem gegebenen Code sagen kann. Versuchen Sie, bei jedem Start einer neuen Spur einen # inneren Schieberegler zu html hinzuzufügen und entfernen Sie ihn jedes Mal, wenn die Spur endet