javascript setInterval() and Variable Scope

问题:

OK, I have read several questions here with the same title but still couldn't find a solution to my problem. I'm working on a basic javascript count down timer and I'm stuck on updating the value of the a variable.

a = 100;
var i = setInterval( function(){ timer( a ); }, 1000 );

function timer( a ){
    console.log( a );
    if( a < 1 ){     
        console.log( 'Reaching Stop' ); 
            clearInterval( i );
            return;         
    } 
    a -= 1;
}

As I'm decrementing the value of a by -1, console.log( a ) should be 1 less every time i.e

100 99 98 ......

But console.log( a ) is always giving 100

newbie to javascript here please be gentle. thanks.

回答1:

You should not pass a in parameter of timer function to access the global variable a. When a is passed to timer function the value of global variable is used but in timer the parameter variable is local to timer function and changing the value of it wont change the value of global variable. It means you have two variables in your code having name a one is global and other is local to timer function and you are changing value of local variable of timer.

a = 100;
var i = setInterval( timer, 1000 );

function timer() {
    console.log( a );
    if ( a < 1 ) {
        console.log( 'Reaching Stop' ); 
        clearInterval( i );
        return;         
    } 
    a -= 1;
}

回答2:

When you pass the variable as a parameter to a function, you create a closure, which creates new scope for the variable.

Since the variable is global, you don't need to pass it in:

http://jsfiddle.net/FBVTT/

var a = 100;
var i = setInterval(timer, 1000);

function timer() {
    console.log(a);
    if (a < 1) {
        console.log('Reaching Stop');
        clearInterval(i);
        return;
    }
    a -= 1;
}

Here's an MDN page on closures.