Question

我在追求的是什么：

我的页面上有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 ++;  
    }
}

Answer 1

这是基于您自己的代码风格：

setInterval(tick,50);

var cusers      = 0
,   cawardshows = 0
,   ccountries  = 0
,   cregions    = 0;

var susers = 500
,   sawardshows = 1500
,   scountries = 500
,   sregions = 50;

var i = 0;

function tick() {    
    $('.count.users').text(cusers);
    if ( cusers < 450 && i % susers == 0)
    {
        cusers ++;
    }

    $('.count.awardshows').text(cawardshows);
    if ( cawardshows < 50 && i % sawardshows == 0 )
    {
        cawardshows ++; 
    }
    $('.count.countries').text(ccountries);
    if ( ccountries < 23  && i % scountries == 0 )
    {
        ccountries ++;  
    }
    $('.count.regions').text(cregions);
    if ( cregions < 4 && i % sregions == 0)
    {
        cregions ++;    
    }
    i += 50;
}

这个想法是只有一个定时器，所以所有更新都将同步到同一个时钟。由于值具有不同的“速度”，因此仅在每第n步更新其中一些。

Answer 2

这将是我稍微更一般的方式。每个计数器完成后它也会杀死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解决方案具有相同的要求）。

Answer 3

这是一个非常适合cpu的解决方案：
- 您只有一个setInterval使用您决定的基期 - 在每个间隔上，您遍历所有计数器，每次都做很少的工作。（我甚至避免使用％） - 元素被缓存。

jsbin在这里： http://jsbin.com/urUxojo/2/edit?html,js,console,output

window.onload=function() {

// this is the period of the base Interval in ms. 
// The counters will be aligned on this base period
Counter.basePeriod = 50 ;

// constructor of a Counter
// ! initializes the counter display.
function Counter(id, period_ms, max, initialValue) {
         this.element  = document.getElementById(id);
         this.period   = Math.ceil(period_ms / Counter.basePeriod) || 1;
         this.max      = max ;
         this.value    = initialValue || 0 ;
         this.last     = 0;
         this.element.value = (this.value);
         return this;
};

// called on each basePeriod tick
// updates the element every period until it reaches its max value.
Counter.prototype.tick = function() {
        this.last++;
        if (this.last == this.period  && 
                           this.value != this.max ) {
             this.value++;
             this.element.value = (this.value);
             this.last=0;
        } 
};

Counter.counters = []; 

Counter.start= function () {   
       function handleCounters() {
         for (var i=0; i< Counter.counters.length; i++) {  Counter.counters[i].tick();  }
       }
       Counter._interval = setInterval(handleCounters, Counter.basePeriod); 
};

Counter.add = function() {
    var newCounter = Object.create(Counter.prototype);
    Counter.counters.push( Counter.apply(newCounter, arguments) );
}

// -------------------------------

Counter.add('cnt1'      , 500  , 450 );
Counter.add('cnt2'      , 400  , 40 );
Counter.add('topCounter', 1000 , 5  );

Counter.start();

}

Answer 4

嗯，你总是希望摆脱两面性，所以你可以这样做：

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

Javascript递增数字

4 个答案: