用于执行延迟循环的Javascript对象

我想在我的网页上有多个数字，当网页加载时“旋转起来”，给人一种水果机的感觉

这涉及一个带有延迟循环的简单函数。做到这一点的方法似乎是。这只适用于页面上的一个数字

但是，对于同时旋转的多个数字，每个数字都需要自己的微调器对象。我使用的原型如下：

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

然而，将递归函数放在原型方法中会导致大崩溃。你能想办法解决这个问题吗

非常感谢

德里克。

当你说：

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

您正在“调用”函数（然后在那里），并将它返回的值作为第一个参数传递给

setTimeout（…）

您可能需要一个匿名函数来执行该任务：

setTimeout(function(){loop(element);}, 30);

当你说：

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

您正在“调用”函数（然后在那里），并将它返回的值作为第一个参数传递给

setTimeout（…）

您可能需要一个匿名函数来执行该任务：

setTimeout(function(){loop(element);}, 30);

有几个问题：

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

演示

几个问题：

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

---

演示

除此之外，上下文（

此

）需要调整。此外，上下文（

此

）需要调整。