Search code examples
javascriptclosuressetinterval

Closure counter inside setInterval


I have a function:

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

Why does not it increment the counter? (instead, it logs 1's). How to make it log ascending numbers? (1, 2, 3, ....)


Solution

    1. You are passing an argument to your anonymous function, but you aren't assigning that argument to a variable. You forgot to put the arguments in the function definition.
    2. You are creating new variables with every iteration instead of sharing the variable between them. You need to turn your logic inside out.

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

    Since you are using an IIFE instead of a function you can call multiple times, this is pretty pointless. You might as well just declare the variable inside the closure.

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

    Or, since Internet Explorer is no longer a concern for most people, dispense with the IIFE and use a block instead.

    {
      let counter = 0;
      setInterval(function() {
        counter++;
        console.log(counter);
      }, 1000);
    }