Отображать значения автоприращения счетчика

Question

Я хочу анимировать счетчик от 0 до заданного значения.

Я пробовал с циклом for(), но он зависает и затем отображает только конечное значение.

// HTML

<input type="hidden" value="100000" id="amount"/>
<input type="text" value="0" id="count"/>
<input type="button" value="run" id="runner"/>​

// JS

$('#runner').click(function(){
   var amount=parseInt($('#amount').val());
   for(i=0;i<=amount;i++)
   {
      $('#count').val(i);
       setTimeout(1);
   }
});

Вы можете увидеть это здесь: http://jsfiddle.net/P4Xy6/1/

Любая идея о том, как я мог бы отображать значения между0 а заданное значение?Или есть лучший способ сделать это?

Answer 1

Это должно сделать это ..

$('#runner').click(function(){
   var amount=parseInt($('#amount').val());
   var counter = 0;
   var interval = setInterval(function(){
      $('#count').val(counter++);
      if (counter > amount){
        clearInterval(interval);
      }
   },100); // the value 100 is the time delay between increments to the counter
});

Демонстрация на http://jsfiddle.net/gaby/rbZq3/

И более оптимизированная ( путем кэширования ссылки на элемент #count ) на http://jsfiddle.net/gaby/rbZq3/2/

Answer 2

Мой совет - избегать setTimeout / Interval при использовании jQuery, потому что эта библиотека уже предоставляет средства для асинхронных вызовов функций, например:

$('#runner').click(function() {
   var amount = parseInt($('#amount').val());

   $({c: 0}).animate({c: amount}, {
        step: function(now) {
            $("#count").val(Math.round(now))
        },
        duration: 3000,
        easing: "linear"
    });
})

Это оживляет счетчик от 0 до amountчерез 3 секунды.

http://jsfiddle.net/zQWRM/2/

Answer 3

Попробуйте это:

jQuery.fn.extend({
  animateCount : function (from, to, time) {
    var steps = 1,
        self = this,
        counter;

    if (from - to > 0) {
      steps = -1;
    };

    from -= steps;

    function step() {
      self.val(from += steps);

      if ((steps < 0 && to >= from) || (steps > 0 && from >= to)) {
        clearInterval(counter);
      };
    };

    counter = setInterval(step, time || 100);
  }
});

Тогда в вашей функции клика вызовите его:

$('#runner').click(function() {
    $('#count').animateCount(1,100);
})​

первый параметр - начальный номер, второй - конечный номер, третий параметр - (необязательно) интервальный таймер

Рабочий пример здесь: http://jsfiddle.net/P4Xy6/2/

Answer 4

HTML:

<input type="hidden" value="100000" id="amount"/>
<input type="text" value="0" id="count"/>
<input type="button" value="run" id="runner"/>​  

JavaScript:

var maxAmount = 5;

$('#runner').click(function(){
   setInterval(
       function() {
           var amount = $('#amount').val();
           if(amount < maxAmount)
           {
               amount++;
               $('#amount').attr('value', amount);
               $('#count').attr('value', amount);        
           }
           else
           {
               clearInterval();
           }
       },
       500   
   );
});

Вот решение для jsfiddle: http://jsfiddle.net/P4Xy6/10/

Answer 5

var amount=parseInt($('#amount').val());
var i = parseInt($('#count').val());
var tim;

function run(){
    clearInterval(tim);
    tim = setInterval(function(){
        $('#count').val(++i);
    },100);        
}

$('#runner').click(function(){
    run();
});

LIVE DEMO