如何在jQuery中将计时器与无限循环链接

How can I link a timer with an infinite loops in jQuery?

本文关键字：计时器 无限循环 链接 jQuery      更新时间：2023-09-26

我正在尝试构建一个与计时器链接的进度条。例如，每秒钟将使条形图的宽度增加1%。现在，我正在进入可以点击按钮并开始进行的部分，但这完全是任意的。如何使用jQuery获得某种无限循环，以便在每秒钟后更新条形图？另一个问题也许更基本？如何使用该按钮来停止条形图的前进？

两个问题

<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 &amp; Typography <em>(2007 - 2009)</em></li> -->
        <li><div class="bar" style="width: 30%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div> </li>
        <li><div class="bar" style="width: 55%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
        <li><div class="bar" style="width: 45%; left: 0;">Drawing &amp; 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>

听起来像是在寻找setInterval。

var timerId = setInterval(function() {
    // code you want to execute every second here
}, 1000);
// 1 second = 1000 milliseconds.

然后，当你不再希望代码每秒运行一次时，你可以这样做：

clearInterval(timerId);

首先，您应该使用jQuery UI的进度条。它会为你简化事情。其次，您可以让计时器不断重置并调用自己，直到某个变量达到100。这是JS计时器中非常常见的模式。

function doTimeout() {
  // do stuff
  if (!complete) {
    setTimeout(doTimeout, 1000);
  }
}
// call it for the first time
setTimeout(doTimeout, 1000);

或者，检查setInterval（）

相关文章：