issue with counter, javascript

Question

I want to make a counter that will count(and add up) each second. I'm trying to do it with the timing events but it doesn't work

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            var i=0;
            function Time(){
                seconds = setInterval(function(){
                    i++;
                }, 1000);
                return {label:seconds};
            }
            console.log(setTimeout(Time, 1000));
        </script>
    </body>
</html>

it just shows the first iteration and also it starts from 2 instead of 1...

SetInterval will return the ID value that can be used to clearInterval. Why are you mapping it to seconds ? — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Apr 21, 2015 at 9:07

extols · Accepted Answer · 2015-04-21 09:09:19Z

1

setTimeout and setInterval return the handle to the timer events as soon as it is called - not the value as you expect.

If you want to retrieve the value you will need to utilise either callbacks, global variables etc.

answered Apr 21, 2015 at 9:09

extols

1,77215 silver badges19 bronze badges

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

Comments

vdwijngaert · Accepted Answer · 2015-04-21 09:09:27Z

1

Your solution prints the output of setTimeout, which is the timeout identifier. This will work:

var i = 0;
function Time()
{
    i ++; 
    console.log(i);
}
setInterval( Time, 1000 );

answered Apr 21, 2015 at 9:09

vdwijngaert

1,55511 silver badges24 bronze badges

Comments

thomaux · Accepted Answer · 2015-04-21 09:11:54Z

1

That's because you're only logging the result value of the first call to your Time method. Additionally you're assigning secondsto the return value of setInterval which returns an id.

If you want to return a value each second, update your code to:

var _seconds = 0;
function Time(callback){
    setInterval(function(){
        callback(++_seconds);
    }, 1000);
 }
 Time(function(seconds){
     console.log(seconds);
 });

answered Apr 21, 2015 at 9:11

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

Comments

Aravind Sivam · Accepted Answer · 2015-04-21 09:09:41Z

0

setTimeout will return the timer id not the return value.Try this

setInterval(function () {
    console.log(++i);
}, 1000);

answered Apr 21, 2015 at 9:09

Aravind Sivam

1,0998 silver badges23 bronze badges

Comments

score 0 · Accepted Answer · 2015-04-21 09:15:39Z

0

Here, setInterval does not returns the value for seconds instead it gives the id.

You need only setInterval:

var count = document.getElementById('count');
var i = 0;
setInterval(function() {
  count.innerHTML = i;
  i++;
}, 1000);

<div id='count'>--</div>

Using clearInterval:

var count = document.getElementById('count');
var i = 0;
var id = setInterval(function() {
  count.innerHTML = i;
  i++;
  if (5 < i)
    clearInterval(id);
}, 1000);

<div id='count'>--</div>

edited Apr 21, 2015 at 9:15

answered Apr 21, 2015 at 9:10

user2575725

Comments

Anamed · Accepted Answer · 2015-04-23 08:25:25Z

0

thanks all for the helpful input. i modified the code to what i had in mind:

    <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            var i=0;
            function Time(){
                i++;
                console.log(i);
                setTimeout(Time, 1000);
            }
            Time();
        </script>
    </body>
</html>

answered Apr 23, 2015 at 8:25

Anamed

1091 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

issue with counter, javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related