Javascript对象执行延迟循环

Question

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

这涉及到一个带有延迟循环的简单函数。这样做的方式似乎是use setTimeout recursively。这适用于页面上的一个数字。

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

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

但是在原型方法中放置递归函数会导致大的崩溃。你能看到解决办法吗？

非常感谢！

德里克。

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/

Answer 2

当你说：

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

你“呼叫”功能（然后有），并通过它返回的第一个参数setTimeout(..)值。

您想匿名函数这样做的工作：

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