CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsdom-events
fenec
fenec

Reputation: 5806

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

I am trying to build a progression bar that is linked with a timer. For instance each second will add 1% to the width of the bar. For now I am getting to the part where I can click a button and it start progressing, but this is purely arbitrary. How can I get some kind of infinite loop with jQuery to update the bar after each second? Another question maybe more basic? How can I use the button to stop the progression of the bar?

Two questions

<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>

Upvotes: 3

Views: 7160

Answers (3)

dontGoPlastic
dontGoPlastic

Reputation: 1782

function doTimeout() {
  // do stuff
  if (!complete) {
    setTimeout(doTimeout, 1000);
  }
}

// call it for the first time
setTimeout(doTimeout, 1000);

alternatively, check out setInterval()

Upvotes: 1

Thomas Graft
Thomas Graft

Reputation: 431

Sounds like you're looking for setInterval.

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

Then when you no longer want the code to run every second, you can do:

clearInterval(timerId);

Upvotes: 9

Mike Thomsen
Mike Thomsen

Reputation: 37526

First of all, you should use jQuery UI's progress bar for this. It'll simplify things for you. Second, you could just have the timer keep resetting and calling itself until some variable reaches 100. That's a very common pattern with JS timers.

Upvotes: 1

Related Questions