我使用的是香草Javascript，我的问题是我需要在一定时间内呈现进度条，但JS只呈现最后一步。。。
'use strict'
var button = document.getElementById('button');
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function initProgressBar()
{
let progressBar = document.querySelector('#progress-bar'),
count = 25,
total = 64;
progressBar.style = `width:${count}%;`;
while (total > 0) {
sleep(300);
total = Math.trunc(total/2);
count = count + total;
progressBar.style = `width:${count}%;`;
}
}
button.onclick = initProgressBar;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#progress-container {
height: 4px;
width: 100%;
}
#progress-bar {
width: 0%;
height: 100%;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<button id=button>press</button>
<script src='prueba.js'></script>
</body>
</html>其想法是，当用户单击按钮时，进度条自动跳到25%，然后逐渐转到~88%（之后，我将使用另一个函数将其发送到100%）
问题是Javascript只更新元素的最后一个值（88%）。
那么，有没有办法在javasciript函数中多次设置元素的属性？
创建sleep方法的方式将阻塞执行线程，在某些情况下可能导致意外行为。使用Promise和setTimeout可以更好地实现睡眠。
下面是使用修改后的睡眠的代码片段，它按预期工作：
'use strict'
var button = document.getElementById('button');
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function initProgressBar()
{
let progressBar = document.querySelector('#progress-bar'),
count = 25,
total = 64;
progressBar.style = `width:${count}%;`;
while (total > 0) {
await sleep(300);
total = Math.trunc(total/2);
count = count + total;
progressBar.style = `width:${count}%;`;
}
}
button.onclick = initProgressBar;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#progress-container {
height: 4px;
width: 100%;
}
#progress-bar {
width: 0%;
height: 100%;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<button id=button>press</button>
<script src='prueba.js'></script>
</body>
</html>
问题的根源可能是total=Math。trunc（总数/2）构造。除以2，然后四舍五入。
因此，它的目标被预设为2564=89，这意味着89%是终点。
一旦它达到88%，它取剩下的1，除以2（1/2=0.5），然后它取整，所以它变成0，88 0=88，它仍然不是89，所以它将在那里结束一个无限循环。
