problem when using += in setInterval to continually increment a variable

Question

here are two questions about the exercise that I am doing for practicing of setInterval fuction

from following code, I tried to print out the variable which is self-adding by 10 within 1000 milliseconds, but when I ran it, in the console of browser, it only showed 10 times of same word "num", how do I figure it out ?

$(function() {
  var timmer;
  GoCount();

  function GoCount() {
    timmer = setInterval(function() {
      var num = 0;
      num += 10;
      console.log(num);
    }, 1000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

and the second question is what's the difference between setInterval and for loop

Move `var num = 0;` out of the GoCount function, and then it will work just fine. — Carsten Løvbo Andersen, Jan 08 '20 at 08:47
2. `setInterval` iterates at a given delay and is effectively asynchronous. A `for` loop runs synchronously without delay (unless once is manually created). If you're ever in doubt about anything to do with JS, always refer to MDN: [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval), [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) — Rory McCrossan, Jan 08 '20 at 08:49

score 3 · Answer 1 · answered Jan 08 '20 at 08:51

3

As @Carsten Løvbo Andersen 's comment, you should make the num as global variable to be able to keep the previous value.

$(function() {
  var timmer;
  var num = 0;
  GoCount();

  function GoCount() {
    timmer = setInterval(function() {
      num += 10;
      console.log(num);
    }, 1000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jan 08 '20 at 08:51

Nguyễn Văn Phong

13,506
17
39
56

1

`num` isn't a global above (which is good!). Can also get rid of the OP's `timmer` variable... – T.J. Crowder Jan 08 '20 at 08:53
I totally agree with you, it should be param passing `GoCount(startNumber);` instead. – Nguyễn Văn Phong Jan 08 '20 at 08:58
1

I'm just saying, you've called it a global. It isn't one. (And yes, that would make sense.) – T.J. Crowder Jan 08 '20 at 09:08

score 1 · Answer 2 · answered Jan 08 '20 at 08:51

1

Each time you the function runs you set "num" back to zero and add 10. You need to declare the num as 0 outside of that function, in the same place as "timmer".

answered Jan 08 '20 at 08:51

heraphim

326
2
10

score 1 · Answer 3 · answered Jan 08 '20 at 08:53

You can pass your variable as function params then you can change the start number as well.

$(function() {
  var timmer;
  GoCount(0);

  function GoCount(num) {
    timmer = setInterval(function() {
     
      num += 10;
      console.log(num);
    }, 1000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

codes inside a loop will be run without delay, but in setInterval you can set that how much time should be between running the codes in your scope.

score 1 · Answer 4 · answered Jan 08 '20 at 08:57

Create the num variable outside the setInterval function. In your code the num variable is declare as new variable and assigned the value to 0 each time the setInterval executes.

$(function() {
    var timmer;
    GoCount();

    function GoCount() {
        var num = 0;
        timmer = setInterval(function() {
            num += 10;
            console.log(num);
        }, 1000);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Yosvel Quintero · Answer 5 · 2020-01-08T09:12:06.760

1

You can make your code simpler by creating an IIFE like this:

((num) => setInterval(() => {
  num += 10
  console.log(num)
}, 1000))(0) // <- Initialize the `num` variable here

edited Jan 08 '20 at 09:12

answered Jan 08 '20 at 09:07

Yosvel Quintero

18,669
5
37
46

score 0 · Answer 6 · edited Jan 08 '20 at 09:02

0

If you want to increase the num by 10 with each iteration you need to move out the num variable (as @Carsten Løvbo Andersen said):

$(function() {
  var num = 0;
  var timmer;
  GoCount();

  function GoCount() {
    timmer = setInterval(function() {
      num += 10;
      console.log(num);
    }, 1000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

See https://jsfiddle.net/f8hn4xrw/ for a working example

edited Jan 08 '20 at 09:02

adiga

34,372
9
61
83

answered Jan 08 '20 at 08:51

Mario Murrent

712
5
24

Why fiddle. The `[<>]` stacksnippet works just fine here – mplungjan Jan 08 '20 at 08:58
[How do I create a runnable stack snippet?](https://meta.stackoverflow.com/questions/358992) – adiga Jan 08 '20 at 09:02
Just a personal preference – Mario Murrent Jan 08 '20 at 09:09

problem when using += in setInterval to continually increment a variable

6 Answers6