Question

请您查看this demo并告诉我如何在到达100%并填写进度条后停止动画和间隔

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

$（ “进度条”）。动画（{ 宽度：“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会将%分隔到下一行。

Answer 2

您需要将清除间隔的代码放在处理加载完成的块中。

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;
        // loading is done, clear the interval
        clearInterval(myVar);
    }
}

完全运行后如何停止间隔

2 个答案: