动画不需要在JavaScript中完成。 改用CSS来实现更流畅的性能和更干净的代码。

通常使用CSS动画比使用JS动画更好，特别是当它们很简单的时候。 你应该在这里多读一些。 如果您出于某种原因仍然希望在javascript中执行，那么应该使用这个专用的调用来动画化素材RequestAnimationFrame。

null

function move() {
  var elem = document.getElementById("myBar");
  
  myBar.style.width = "0%";
  
  setTimeout(() => {
    myBar.style.width = "100%";
  });
  
  setTimeout(() => {
    alert("done");
    /* do stuff */
  }, 5000);
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
  transition: width 5s linear; /* note this line */
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

根据文档，setIntervaldelay参数以毫秒为单位

delay可选定时器在执行指定函数或代码之间应延迟的时间，以毫秒（千分之一秒）为单位。 有关允许的延迟值范围的详细信息，请参见下面的延迟限制。

null

var i = 0;
const element = document.getElementById("myBar");
let width = 1;
let chunk = 100 / 5;

function move() {
  if (i == 0) {
        
    let handle = setInterval(frame, 1000);
    
    function frame() {
      if (width >= 100) {
        clearInterval(handle);
      } else {
        width = width + chunk;
        element.style.width = `${width}%`;
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 0%;
  transition: all .3s ease-in;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

null

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 5000/100);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>