javascript - (Javascript) CSS width() 属性在窗口调整大小之前不应用

Question

我有一个简单的 scrubber 用于播放音乐，它使用两个 div，$scrubber 和 $progress，并随着歌曲的进行增加进度的宽度。

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

当我收到进度事件时，我会计算宽度，然后使用 Javascript 设置 $progress 的宽度属性。

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

随着歌曲的进行和 % 的增加，我可以看到这些日志语句。 但是，在调整窗口大小之前，不会真正设置进度条宽度。

无论我朝哪个方向或做了多小的更改，它都会立即增加宽度，并且进度条会竞相追赶。

这只发生在 Chrome 中，并且最近才启动，没有对该文件进行太多代码更改 - Firefox 按预期工作并且宽度设置正常。

关于我可能做错了什么或如何解决它的任何想法？提前谢谢你。

编辑:添加了 JSFiddle，其中包含预期行为的基本概念:https://jsfiddle.net/ympu6rt3/3/

Answer 1

我认为你的问题是你从 jquery $progress 调用了错误的元素，它应该是 $('#progress')，也使用 setInterval 而不是setTimeOut由于setTimeOut只会执行一次，而setInterval会一直运行函数。

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