0

ページが読み込まれると「スピンアップ」し、フルーツ マシンのような印象を与えるように、Web ページに複数の数字を表示したいと考えています。

これには、遅延ループを持つ単純な関数が含まれます。これを行う方法は、setTimeout を再帰的に使用することのようです。これは、ページ上の 1 つの数字に対してのみ有効です。

ただし、複数の数字が同時に回転する場合は、それぞれに独自のスピナー オブジェクトが必要です。次のようなプロトタイプを使用しました。 

var Spinner = function(id){
    this.element = $('#' + id);
    this.target_value = this.element.text()
    this.initial_value = this.target_value - 30;
};

Spinner.prototype.spinUp = function() {

    loop(this.element); 

    function loop(element) {
        element.html(this.initial_value += 1);
        if (this.initial_value == this.target_value) {
                return;
            };
        clr = setTimeout(loop(element), 30);  // 30 millisecond delay
    };
};

var Spinner1 = new Spinner('number')

Spinner1.spinUp();

ただし、プロトタイプ メソッド内に再帰関数を配置すると、大きなクラッシュが発生します。これを回避する方法がわかりますか？

どうもありがとう！

デレク。

4

2 に答える 2

2

いくつかの問題:

  • loop()関数を渡す方法ではなく、関数を呼び出す方法です。
  • 関数をオブジェクトのメソッドとして呼び出していません

これを試して： 

Spinner.prototype.spinUp = function() {
    var loop = function() {
            this.element.html(this.initial_value += 1);
            if (this.initial_value == this.target_value) {
                return;
            };
            setTimeout(loop, 30); // 30 millisecond delay   
        }.bind(this); //Just flat out bind the function to this instance so we don't need to worry about it
    loop();
};

デモhttp://jsfiddle.net/KAZpJ/

于 2012-07-29T16:21:18.117 に答える
2

あなたが言う時：

clr = setTimeout(loop(element), 30);

関数を「呼び出し」（その場で）、最初のパラメーターとして返される値をに渡しますsetTimeout(..)。

その仕事をする無名関数が欲しいでしょう：

setTimeout(function(){loop(element);}, 30);
于 2012-07-29T16:17:39.543 に答える