0

我想在页面加载时在我的网页上“旋转”多个数字，给人一种像水果机的印象。

这涉及一个带有延迟循环的简单函数。这样做的方法似乎是递归地使用 setTimeout。这仅适用于页面上的一个数字。

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

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

当你说：

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

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

您需要一个匿名函数来完成这项工作：

setTimeout(function(){loop(element);}, 30);
于 2012-07-29T16:17:39.543 回答
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 回答