Javascript 全速跑后如何停止间歇

请看一看并告诉我如何在达到

100%

并填充进度条后停止动画和间隔

我尝试添加

clearInterval（myVar）到间隔的末尾，但这将停止增加百分比文本

$（“.progress bar”）.animate({
宽度：“100%”
}, 3000);

var myVar=setInterval（函数（）{myTimer（）}，1）；
var计数=0；
函数myTimer（）{
如果（计数<100）{
$（'.progress'）.css（'width'，count+“%”）；
计数+=0.05；
document.getElementById（“demo”）.innerHTML=Math.round（count）+“%”；
//加载时要执行的代码
}
如果（计数>99）{
//加载后要执行的代码
计数=0；
}
}
净距（myVar）；
您需要将清除间隔的代码放在处理加载完成的块中

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);
    }
}

var myVar=setInterval（函数（）{
myTimer（）
}, 1);
var计数=0；
函数myTimer（）{
如果（计数<100）{
$（'.progress'）.css（'width'，count+“%”）；
计数+=0.05；
document.getElementById（“demo”）.innerHTML=Math.round（count）+“%”；
//加载时要执行的代码
}否则，如果（计数>99）{
//加载后要执行的代码
计数=0；
//加载完成后，清除间隔
净距（myVar）；
}
}
不要为此使用计时器。jQuery为您提供了一种聆听动画进度的方法：

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

查看您的更新

注意：我将您的
demo
元素更改为
span
，因为
p
会将
%
打断到下一行。
您的意思是将
clearInterval
调用放在加载后注释
//代码要执行的行吗？在您放置它的地方，它在
setInterval
函数的第一次迭代排队之前运行……您应该能够将
clearInterval（myVar）
添加到
else if（count>99）
语句中。我在你的JSFIDLE上试过了，效果很好。
$(".progress-bar").animate({
    width: "100%"
},{
    duration: 3000,
    progress: function(_, progr) {
        $('#demo').text( Math.round(100 * progr));          
    }
});