如何停止的时间间隔后在全部运行

问题描述：

能否请您看看this demo，让我知道我怎么能达到100%和填充进度条如何停止的时间间隔后在全部运行

我尝试添加clearInterval(myVar);以结束后停止动画和间隔但这会停止增加文本百分比

$（“。progress-bar”）。animate（{0}）

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'调用放在你放置注释后//代码加载后执行的行？在你放置它的地方，它会在'setInterval'函数的第一次迭代甚至排队之前运行... –

你应该能够将'''clearInterval（myVar）'''添加到'''else if （count> 99）'''语句。我尝试了你的jsfiddle，它工作。 – clarmond

答

不要为此使用计时器。 jQuery提供了一个方法可以让你收听到动画的进度：

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

看到更新后的fiddle

NB：我改变了你的demo元素的span，作为p将打破%到下一行。

答

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

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

如何停止的时间间隔后在全部运行

相关推荐