Can someone explain to me why JSLint complains about Function inside the loop with this example:

  for (var i = 0; i < buttons.length; i++) {

    (function(i) {

      buttons[i].onclick = function(e) {

        t.progressBars[t.current].update(buttons[i].getAttribute(data-value));

      }

    })(i);

  }

But dosen't when I change it to:

function makeHandler(i)

  {

    return function() {

        t.progressBars[t.current].update(buttons[i].getAttribute(data-value));

      }

  }



  for (var i = 0; i < buttons.length; i++) {



      buttons[i].onclick = makeHandler(i);



  }

I don't quite understand as it seems that with each loop iteration new function object has to be returned, even though it happens inside of makeHandler() function. Why the second example is ok with JS linters?