1

私が求めているもの：

私のページには 5 つのカウンターがあります。それらはすべて 0 から開始し、異なる速度で設定された異なる値まで同時に上向き (インクリメント) にカウントする必要があります。たとえば、変数に 10、25、1500、400、500 を設定すると、それらすべてがこれらの値に到達するようになります。

• 同時に開始 • 異なる速度ですべてインクリメント • それぞれに設定された値で停止

私の問題

これを行うための単純で非常に効率的な JavaScript を記述する良い方法がわかりません (モバイルで使用する予定です)。現在、すべてのカウンターを異なる時間に開始するように見える setinterval を使用しています。 ..

これまでのところ http://jsfiddle.net/95smH/

setInterval(f1,500);
setInterval(f2,1500);
setInterval(f3,500);
setInterval(f4,50);

var v1      = 0
,   v2 = 0
,   v3  = 0
,   v4  = 0;

function f1() {
    $('.count.v1').text(v1);
    if ( v1 < 450 )
    {
        v1 ++;
    }
}
function f2() {
    $('.count.v2').text(v2);
    if ( v2 < 50 )
    {
        v2 ++;  
    }
}
function f3() {
    $('.count.v3').text(v3);
    if ( v3 < 23 )
    {
        v3 ++;  
    }
 }
function f4() {
    $('.count.v4').text(v4);
    if ( v4 < 4 )
   {
        v4 ++;  
    }
}
4

4 に答える 4

1

これは、もう少し一般的な方法での私のショットです。setIntervalまた、すべてのカウンターが終了したら、それを殺します。もちろん、これには Javascript 間隔の典型的な不正確さが残ります。

var counter = new (function () {
    'use strict';

    var counters = [],
        handler = null,
        precision = 50;

    this.addCounter = function (maxValue, interval, selector) {
        counters.push({
            maxValue: maxValue,
            currentValue: 0,
            interval: interval / precision,
            intervalCounter: 0,
            $output: $(selector)
        });

        return this;
    };

    this.start = function () {
        handler = setInterval(function () {
            var stillRunning = false;
            for (var i = 0; i < counters.length; i++) {
                var counter = counters[i];

                counter.intervalCounter++;
                if (counter.intervalCounter === counter.interval) {
                    counter.intervalCounter = 0;
                    counter.currentValue++;

                    if (counter.currentValue <= counter.maxValue) {
                        stillRunning = true;
                        counter.$output.val(counter.currentValue);
                    }
                } else {
                    stillRunning = true;
                }
            }

            if (!stillRunning) {
                clearInterval(handler);
            }
        }, precision);
    };

    return this;
})();

counter
    .addCounter(50, 250, '.v1')
    .addCounter(25, 500, '.v2')
    .start();

デモ フィドル: http://jsfiddle.net/s9AYz/1/ 各カウンターの間隔がその倍数になるように精度を設定する必要があることに注意してください (Boris ソリューションにも同じ要件があります)。

于 2013-09-08T19:18:14.900 に答える
0

さて、あなたは常に二重性を取り除きたいので、次のことができます：

function IntervalClass(selector, sleepTime, maxValue, startValue) {
    var curValue = startValue;

    this.tick = function () {
        if (curValue < maxValue) {
            curValue++;
        }
        $(selector).html(curValue);
    };

    this.start = function () {
        setInterval(this.tick, sleepTime);
    };
}

new IntervalClass(".count.users", 1000, 35, 0).start();
new IntervalClass(".count.awardshows", 500, 20, 0).start();
new IntervalClass(".count.countries", 1500, 15, 0).start();
new IntervalClass(".count.regions", 200, 100, 0).start();

JSFIDDLE

于 2013-09-08T20:08:38.667 に答える