当页面加载时,我想在网页上“旋转”多个数字,给人的感觉就像是一台水果机。

这涉及具有延迟循环的简单功能。这样做的方法似乎是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/

10-07 14:36
查看更多