Question

我有一个简单的擦洗器用于播放音乐，使用两个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＆＃39;宽度属性。

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

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

1 个答案: