Trying to figure out why function(argument) not console-logging as expected

Question

var interval = window.setInterval(animate, 500);
var i = 5;
function animate() {
    if (i > 1) {
        i--;
        console.log(i);
    } else {
        window.clearInterval(interval);
    }
}
animate();

The above javascript has var i = 5; and console logs the numbers 5, 4, 3, 2, and 1. DEMO fiddle

I wanted to put the starting number into the animate() function as an argument though, so I added an argument to animate(), defined the variable i as solely var i;, and put a number into animate():

var interval = window.setInterval(animate, 500);
var i;
function animate(i) {
    if (i > 1) {
        i--;
        console.log(i);
    } else {
        window.clearInterval(interval);
    }
}
animate(10);

DEMO fiddle

However, this second attempt only spits out the number 9, and doesn't spit out 10, 9, 8, 7, etc.

Does anyone know what I'm doing wrong?

Answer 1

You could instead have the function recursively call itself, and use setTimeout with an anonymous function that passes in the current value of i.

function animate(i) {
    if (i > 1) {
        i -= 1;
        console.log(i);
        setTimeout(function() {
            animate(i);
        }, 500);
    }
}

animate(10);

This way, you don't need to manage an interval, and the animation will only be controlled by the animate() method. Cleaner IMO.

Working fiddle: http://jsfiddle.net/UNkhK/

If you still want control over the timeout: You could also extend this guy's functionality by making him into an object.

function Animation(delay) {
    this.delay = delay || 500;
    this.timeout = null;
}

Animation.prototype.animate = function(i) {
    if (i > 1) {
        i -= 1;
        console.log(i);
        var self = this;
        this.timeout = setTimeout(function() {
            self.animate(i);
        }, this.delay);
    }
}

Animation.prototype.stop = function() {
    clearTimeout(this.timeout);
}

var animation = new Animation(500);
animation.animate(10);

// Testing
setTimeout(function() {
    animation.stop();
    console.log('Animation stopped prematurely!');
}, 2000);

Working fiddle / demo: http://jsfiddle.net/5dZyd/

Answer 2

you didnt use the variable i, you created a new one, in short, i inside the function definition - animate(i) creates a new var i for the function, and doesn't use the global one try

var i = 10;
function animate() {
    if (i > 1) {
    i--;
    console.log(i);
}
/*
    rest of your code here
*/
animate();

see javascript scoping

also use setTimeout not setInterval see here

fiddle

Answer 3

Function arguments are local variables that shadow global variables. So if you use the same name i for the argument, you can't access the global variable that has that name. You need to use different variables.

var global_i;
function animate(local_i) {
    if (local_i !== undefined) { // Will be undefined when called from setInterval
        global_i = local_i;
    }
    if (global_i > 1) {
        global_i--;
        console.log(global_i);
    } else {
        window.clearInterval(interval);
    }
}
animate(10);

Answer 4

You may try this (call the function from within the function itself and pass the variable i)

var interval;
function animate(i) {
   if (i > 1) {
        i--;
        console.log(i);
        interval = setTimeout(function(){ animate(i) }, 500);
    }
}
animate(10);

FIDDLE.