如何在完全运行后停止间隔答案

【问题标题】：How to Stop Interval After on Full Run如何在完全运行后停止间隔
【发布时间】：2017-02-21 19:39:00
【问题描述】：

你能看看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);

【问题讨论】：

您的意思是将clearInterval 调用放在您放置评论// code to do after loading 的行吗？您放置它的位置，它会在 setInterval 函数的第一次迭代甚至排队之前运行...
您应该能够将clearInterval(myVar) 添加到else if(count > 99) 语句中。我在你的 jsfiddle 上试过了，效果很好。

标签： javascript jquery

【解决方案1】：

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

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

查看您更新的fiddle

注意：我将您的 demo 元素更改为 span，因为 p 会将 % 中断到下一行。

【讨论】：

【解决方案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);
    }
}

【讨论】：