javascript - 如何在完全运行后停止间隔

Question

你能看看this demo吗？并告诉我如何在达到 100% 并填满进度条后停止动画和间隔

我尝试将 clearInterval(myVar); 添加到间隔的末尾，但这会停止增加百分比文本

$(".progress-bar").animate({ 宽度:“100%”}, 3000);

var myVar=setInterval(function(){myTimer()},1);
var count = 0;
function myTimer() {
if(count < 100){
  $('.progress').css('width', count + "%");
  count += 0.05;
   document.getElementById("demo").innerHTML = Math.round(count) +"%";
   // code to do when loading
  }

  else if(count > 99){  
      // code to do after loading
  count = 0;
  }
}
  clearInterval(myVar);

Answer 1

不要为此使用计时器。 jQuery 提供了一种方法让你监听动画的进度:

$(".progress-bar").animate({
    width: "100%"
},{
    duration: 3000,
    progress: function(_, progr) {
        $('#demo').text( Math.round(100 * progr));          
    }
});

查看更新后的 fiddle

注意:我将您的 demo 元素更改为 span，因为 p 会将 % 拆分为下一行。