（Javascript）CSS width（）属性在窗口调整大小之前不适用

Question

I have a simple scrubber for playing music, using two divs, $scrubber and $progress, and increasing the width of the progress as the song progresses.

<div class="a-meter" id="scrubber" aria-label="60%" style="height:5px">
    <div class="a-meter-bar" id="progress">
    </div>
</div>

As I receive progress events, I calculate the width and then use Javascript to set $progress' width property.

    countdownTimeout = setTimeout(updateCountdown, 100);
    var x = (interval)*(durationSeconds-secondsRemaining)+"%";
    console.log("width is "+x);
    $progress.width((interval)*(durationSeconds-secondsRemaining)+"%");

I can see these log statements as the song progresses and the % increases. However, the progress bar width will not actually be set until the window is resized.

It does not matter in which direction or how small of a change I make, it immediately kicks in the width and the progress bar races to catch up.

This only happens in Chrome, and only recently started without much code change to this file - Firefox works as expected and the width is set normally.

Any ideas on what I might be doing wrong or how I might fix it? Thank you in advance.

Edit : added JSFiddle with basic idea of what the expected behavior is: https://jsfiddle.net/ympu6rt3/3/

Answer 1

I think that you problem is that you call wrong to the element from jquery $progress it should be $('#progress') , also use setInterval instead of setTimeOut due to setTimeOut is executed only one time, while setInterval run the function constantly.

countdownTimeout = setInterval(updateCountdown(), 100);
function updateCountdown(){
    var x = (interval)*(durationSeconds-secondsRemaining)+"%";
    console.log("width is "+x);
    $('#progress').width((interval)*(durationSeconds-secondsRemaining)+"%");
}