Question

我有一个非常简单的JS计数器，我在屏幕上显示如下屏幕：

每5分钟拨打一次jsonp并检索“总数”
然后通过递增显示的最后总数直到它等于新总数，将此数字显示在屏幕上。（这个数字只能增加）

我在使数字顺利增加方面遇到了一些麻烦。我想要做的是找到一个delta（即New total - old total）并在5分钟内逐渐递增数字直到下一个调用，这样看起来就像是一个很好的平滑过渡。

关于我如何做到这一点的任何想法？

目前我的一些代码看起来像这样（这个块每隔5分钟调用一次。是的，它非常需要重构...）

var LAST_NUMBER_OF_SESSIONS = null;
var five_minutes_in_seconds = 300;
var new_number_of_sessions;

  $.getJSON('http://blah.com/live_stats/default_jsonp.aspx?callback=?', function(data) {
    if(LAST_NUMBER_OF_SESSIONS === null){
      LAST_NUMBER_OF_SESSIONS = data.total_sessions;
    }

    new_number_of_sessions = data.total_sessions;
    var delta = Math.floor(new_number_of_sessions - LAST_NUMBER_OF_SESSIONS);
    var time_interval = (five_minutes_in_seconds / delta) * 1000;
    var old_value = LAST_NUMBER_OF_SESSIONS;
    var new_value = null;

    sessions_interval = setInterval(function (){
      new_value = parseInt(old_value, 10) + 1;
      $('#stats').text(new_value);
      old_value = new_value;
      if(new_value >= new_number_of_sessions){
        clearInterval(sessions_interval);
      }
    }, time_interval);

    LAST_NUMBER_OF_SESSIONS = new_value;
  });
}

此代码似乎在5分钟开始时非常快地增加数字然后停止所以它不完全正确...

Answer 1

试试这个：

var total = 0,
    delta = 0,
    stats = $('#stats').text( total );

function increment() { 
    var v = +stats.text();

    if ( v < total ) {
        stats.text( v + 1 );           
    } else {
        $.getJSON('http://...', function(data) { // added data here        
            delta = Math.floor( 300000 / ( data.total_sessions - total ) );  
            total = data.total_sessions;
        });        
    }

    setTimeout(increment, delta);
}

更新：

为了测试我的代码，我不得不模拟JSON响应 - 我使用了一组数字。见这里：http://jsfiddle.net/simevidas/MwQKM/

（在演示中，我使用的是5秒而不是5分钟的间隔。）

Answer 2

我不确定为什么你的代码没有按预期工作，尽管我怀疑它与行LAST_NUMBER_OF_SESSIONS = new_value;有关。我写了something similar，它运作正常。它与你所拥有的不同，减去最后一行代码。

在JS中使用可变时间段平滑地增加数字

2 个答案: