Why is this Javascript setInterval with object calling function not evaluating the inner parameter when passing in a callback?

The following script outputs 1 2 3 4 5 6 7.. I would assume it would output 0 1 2 3 4 5 ...

In fact, in my actual code I believe the print(lostCnt) always is connected to the latest (acting like a global) last count update. Why is this? And what can I do to have it keep the actual cnt with the constraint that I can't modify any of the code in obj1.

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript">
function obj1(parameter, callback){
    setTimeout(callback, parameter);
}
function caller(){
    function miscFunction(cnt){
        document.getElementById("main").appendChild(document.createTextNode(cnt));
    }
    var lostCnt = 0;
    setInterval(
        function(){
            new obj1(5, 
                function(){
                    miscFunction(lostCnt);
                });
           lostCnt++;
        },5000
    );
}   
</script>


</head>
<body onload="caller();">
<div id="main">
</div>
</body>

</html>

Thanks, and this is my first post

Solution

The lostCnt++ executes before the first call to miscFunction().

The obj1 constructor doesn't show the number until 5 milliseconds after it's constructed. It's only at that point that the callback is called, and the callback references lostCnt directly - not a saved copy of what it was when the obj1 instance was created.

So your supposition is correct, and I think it's pretty obvious — the callback passed to the obj1 constructor is referencing lostCnt directly.

If you want to do it differently, you could do this:

setInterval(
    function(){
        new obj1(5, 
          function(savedLostCnt) {
            return function(){
                miscFunction(savedLostCnt);
            };
          }(lostCnt));
        lostCnt++;
    },5000
);