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

上記の JavaScript には、5、4、3、2 var i = 5;、および 1 という数字があり、コンソール ログに記録されます。DEMO フィドル

ただし、開始番号を引数として関数に入れたかったanimate()ので、 に引数を追加しanimate()、変数 i を only として定義し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);

デモフィドル

ただし、この 2 回目の試行では数字の 9 だけが吐き出され、10、9、8、7 などは吐き出されません。

私が間違っていることを誰かが知っていますか？

4

4 に答える 4

2

代わりに、関数自体を再帰的に呼び出し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/

于 2013-09-29T05:14:05.037 に答える
1

これを試すことができます（関数自体から関数を呼び出し、変数を渡しますi）

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

フィドル。

于 2013-09-29T05:18:20.097 に答える
1

変数を使用しませんでした。つまり、関数定義内iに新しい変数を作成しました-関数の新しい変数を作成し、グローバル変数を使用しませんianimate(i)var i

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

JavaScript スコープを参照してください

こちらも参照しsetTimeoutないでくださいsetInterval

フィドル

于 2013-09-29T05:11:25.527 に答える
1

関数の引数は、グローバル変数をシャドウするローカル変数です。したがって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);
于 2013-09-29T05:13:26.203 に答える