执行延迟循环的 Javascript 对象

Question

我希望网页加载时有多个数字“旋转”，给人一种像水果机一样的印象。

这涉及一个带有延迟循环的简单函数。执行此操作的方法似乎是 use setTimeout recursively 。这对于页面上只有一个数字来说效果很好。

但是，对于同时旋转的多个数字，每个数字都需要自己的旋转器对象。我使用了这样的原型(prototype):

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

然而，将递归函数放入原型(prototype)方法中会导致严重崩溃。你能找到解决这个问题的方法吗？

非常感谢!

德里克。

Answer 1

几个问题:

• 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/