Javascript 如何在jQuery中将计时器与无限循环链接?
我正在尝试建立一个与计时器链接的进度条。例如,每秒钟将使条的宽度增加1%。 现在,我进入了一个部分,我可以点击一个按钮,它开始进行,但这完全是任意的。如何使用jQuery获得某种无限循环,以便在每秒钟之后更新条? 另一个问题可能更基本?如何使用该按钮停止条形图的前进 两个问题Javascript 如何在jQuery中将计时器与无限循环链接?,javascript,jquery,jquery-ui,jquery-plugins,dom-events,Javascript,Jquery,Jquery Ui,Jquery Plugins,Dom Events,我正在尝试建立一个与计时器链接的进度条。例如,每秒钟将使条的宽度增加1%。 现在,我进入了一个部分,我可以点击一个按钮,它开始进行,但这完全是任意的。如何使用jQuery获得某种无限循环,以便在每秒钟之后更新条? 另一个问题可能更基本?如何使用该按钮停止条形图的前进 两个问题 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-T
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fancy Timer </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="javascript/jquery-1.7.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function ( $ ) {
last=$('ul.events li:last div').css('border', '1px solid red');
function foo(e) {
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
};
$("#timer").bind({
'click': foo,
});
})
</script>
<div id="wrapper">
<a href="#" id="timer">START</a>
<ul class="events">
<!-- <li style="width: 42.48%; left: 57.2%;">Design & Typography <em>(2007 - 2009)</em></li> -->
<li><div class="bar" style="width: 30%; left: 0;">Drawing & Illustration <em>(2003 - 2009)</em></div> </li>
<li><div class="bar" style="width: 55%; left: 0;">Drawing & Illustration <em>(2003 - 2009)</em></div></li>
<li><div class="bar" style="width: 45%; left: 0;">Drawing & Illustration <em>(2003 - 2009)</em></div></li>
<li><div class="bar" style="width: 10%; left: 0;">Drawing </div></li>
</ul> <!-- end .events -->
</div>
</body>
</html>
花式计时器
$(文档).ready(函数($){
last=$('ul.events li:last div').css('border','1px实心红色');
函数foo(e){
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
setTimeout(function(){last.animate({“width”:“+=5%”}),1000);//延迟1.5秒
};
$(“#计时器”).bind({
“单击”:foo,
});
})
- 绘图及;插图(2003-2009)
- 绘图及;插图(2003-2009)
- 绘图及;插图(2003-2009)
- 绘图
首先,您应该使用jQuery UI的进度条进行此操作。它会为你简化事情。其次,您可以让计时器不断重置并调用自身,直到某个变量达到100。这是JS定时器中非常常见的模式。听起来像是您在寻找的
然后,当您不再希望代码每秒运行时,可以执行以下操作:
clearInterval(timerId);
或者,检查一下jQuery并没有做到这一点,而JavaScript却做到了这一点。
clearInterval(timerId);
function doTimeout() {
// do stuff
if (!complete) {
setTimeout(doTimeout, 1000);
}
}
// call it for the first time
setTimeout(doTimeout, 1000);