当页面加载时,我想在网页上“旋转”多个数字,给人的感觉就像是一台水果机。
这涉及具有延迟循环的简单功能。这样做的方法似乎是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();
但是,将递归函数放入原型方法中会导致严重的崩溃。您能解决这个问题吗?
非常感谢!
德里克
最佳答案
几个问题: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/