javascript - 如何即时更新一个平滑更新的进度条？

Question

有点具体问题，但我有一个进度条在 10 秒内从 100% 移动到 0%，我想在单击按钮后将它跳到任何百分比并从那里继续。到目前为止，这是一个 fiddle :

https://jsfiddle.net/41o6xvyt/

这 有点 工作除了我必须使用超时和一些即时 css 切换技巧来让它工作之外(即使这样它可能无法在较慢的计算机上工作并且它会丢失很多毫秒)。我想知道是否有更好的方法不需要超时或这种 hack 就可以工作。

Answer 1

之所以需要 setTimeout()，是因为更改由浏览器缓存，并且仅在整个脚本执行后应用。 setTimeout 允许执行一个脚本，然后在超时后执行另一个脚本。这允许应用 CSS 更改。在您的示例中，如果我们仅调用 b()，则发生的情况如下:

$("#first").css({ 'transition-duration' : '0s' });  // Cache change1
$("#first").css("width","50%");                     // Cache change2
$("#first").css({ 'transition-duration' : '5s' });  // Overwrite change1
$("#first").css("width", "0%");                     // Overwrite change2
// Apply style changes

transition-duration 和 width 的第一个更改实际上从未存在过，也从未应用过，因为它们都是在脚本末尾完成的。

如果您读取元素的 offsetHeight 属性，它将刷新缓存并应用更改，这将强制应用对 CSS 所做的更改。

您还需要做的是更改进度条 width 以在 CSS 中设置而不是作为属性(因为刷新仅影响 CSS 而不是直接在 样式)。

$("#report_jump").click(function(){
    $("#first").css({ 'transition-duration' : '0s' });
    $("#first").css("width","50%");
    $("#first")[0].offsetHeight; // flush CSS, the above changes will now be applied
    b();
});

Fiddle Example

---

注意

“即时 css 切换技巧” 并不是真正的技巧。我们只是想将 width 更改为 50% 并在 0 秒内完成。这就是为什么 'transition-duration' : '0s' 是必需的。