Question

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

以上javascript包含var i = 5;，控制台会记录数字5,4,3,2和1. DEMO fiddle

我想将起始编号作为参数放入animate()函数中，因此我向animate()添加了一个参数，将变量i定义为var i;，然后放入编号为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

然而，第二次尝试只吐出数字9，并且不会吐出10,9,8,7等。

有谁知道我做错了什么？

Answer 1

您可以使函数以递归方式调用自身，并将setTimeout与传递当前值i的匿名函数一起使用。

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

animate(10);

这样，您无需管理间隔，动画将仅由animate()方法控制。清洁IMO。

工作小提琴：http://jsfiddle.net/UNkhK/

如果你仍然希望控制超时：你也可以通过让他成为一个对象来扩展这个人的功能。

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);

工作小提琴/演示：http://jsfiddle.net/5dZyd/

Answer 2

你没有使用变量i，你在函数定义中创建了一个新的i - animate(i)为函数创建了一个新的var i，并且不使用全局尝试

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

请参阅javascript scoping

也使用setTimeout而不是setInterval see here

fiddle

Answer 3

函数参数是影响全局变量的局部变量。因此，如果对参数使用相同的名称i，则无法访问具有该名称的全局变量。您需要使用不同的变量。

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

你可以尝试这个（从函数本身调用函数并传递变量i）

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

FIDDLE.

试图弄清楚为什么函数（参数）不是预期的控制台日志记录

4 个答案: