Simple JavaScript counter function

Question

I would like to make a counter function, and precise a variable for the starting time and the place to be displayed.

So if I would like to have many counter per page, I can easily manage it:

$(document).ready(function() {

            // set time and place (where to display the counter)
            function countDown(time, place){

                if(time > 0){
                    time--;    
                    setInterval(function(){countDown(time,place)}, 1000);
                } // end if

                if(time == 0)
                {
                    window.clearInterval(time);
                }
            } // end function

                     $('.click').click(function(){
                        countDown(30, '#counter');                              

                     });

}); // end DOM

   </script>
</head>


<body>
    <div class="click">clickme</div>
    <br />

    <div id="counter">30</div>

</body>

Note that setInterval does not run at exactly the specified interval, so the above will not run at exactly 1 second intervals so simply decrementing the value on each call will not accurately reflect the number of elapsed seconds. The function also calls itself on each run so after about 30 seconds you will have 30 timers running. — RobG
– RobG, Commented Dec 19, 2013 at 3:27
Also, clearInterval expects to be passed the value returned from the call to setInterval, not 0. — RobG
– RobG, Commented Dec 19, 2013 at 3:31

Musfiqur rahman · Accepted Answer · 2013-12-23 14:51:50Z

2

Try this:

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>


                var myVar;
var clickcount=0;

function countDown (time, place) {
        if (time > 0) {

        $(place).html(time);
        time--;
        myVar=setTimeout(function () { countDown(time, place); }, 1000);
  }
}

function startreset(time,place){
        clickcount++;
        if(clickcount % 2 === 0){
             clearTimeout(myVar);              
        } else {
            countDown(time,place);
        }

    }

$('.click').click(function(){
        startreset(30, '#counter');                              
        });



       </script>
    </head>




 <body>
        <div class="click" onClick="javascript:countDown(30,'#counter');">clickme</div>
        <br />

        <div id="counter">30</div>

    </body>

edited Dec 23, 2013 at 14:51

answered Dec 19, 2013 at 3:28

Musfiqur rahman

7394 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abu Rayane Over a year ago

Thanks for all of you guys, I noticed something, if I click on "click me" the counter started, and if I click again, another counter started,is there a way to reset it, in both ways: 1- Once clicked again reset to 0, 2- Pause it. If anybody can explain to me both situations Thanks guys

Musfiqur rahman Over a year ago

Keep a global variable to keep track if it is has been pressed. It can be count=0; Every time you press call a function that increase count. Based count%2=0/1, you do something. Please upvote my response if you think it was helpful.

Abu Rayane Over a year ago

I've tested this one, just to check whether I've got ur idea, but it seems something hanging there: function clearTimer(ident){ ident++; if(ident % 2 == 0){ alert(0); } else { alert(1); } } $('.click').click(function(){ countDown(30, '#counter'); clearTimer(1); });

Musfiqur rahman Over a year ago

I have updated the javascript. It stops when you click twice and restart when you click again.

Abu Rayane Over a year ago

done dude, thanks man, I changed the code slightly, but the idea still remain the same: jsfiddle.net/aburayane/wsnXY

mtoor · Accepted Answer · 2013-12-19 03:52:39Z

1

The problem you are likely having is that you are calling setInterval multiple times. setInterval does more than just wait the x milliseconds you tell it to and then call your method, it continues to call your method every subsequent x milliseconds. So, when you call countDown the first time, an interval is set for your function. That interval expires and countDown is called again. All fine so far, but now the second call to countDown establishes ANOTHER setInterval. The program will wait your x milliseconds to call countDown from the second setInterval, but it will call it from the first setInterval sooner.

...In other words, you shouldn't be repeatedly calling setInterval. What you want is setTimeout, which waits the specified amount of time and then calls the specified method once.

function countDown (time, place) {
  if (time > 0) {
    time--;
    $(place).html(time);
    setTimeout(function () { countDown(time, place); }, 1000);
  }
}

Alternatively, if you're not feeling recursive today:

function countDown (time, place) {
  var interval = setInterval(function () {
    if (time > 0) {
      time--;
      $(place).html(time);
    } else {
      window.clearInterval(interval);
    }
  }, 1000);
}

which leverages setInterval, BUT ONLY ONCE.

JSFiddle provided: http://jsfiddle.net/LKvBR/

edited Dec 19, 2013 at 3:52

answered Dec 19, 2013 at 3:46

mtoor

2384 silver badges7 bronze badges

1 Comment

Abu Rayane Over a year ago

I've tested this one, just to check whether I've got ur idea, but it seems something hanging there: [code] function clearTimer(ident){ ident++; if(ident % 2 == 0){ alert(0); } else { alert(1); } } $('.click').click(function(){ countDown(30, '#counter'); clearTimer(1); }); [/code]

Collectives™ on Stack Overflow

Simple JavaScript counter function

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related