平稳递增数与JS

Question

可变的时间我有一个非常简单的JS柜台，我在仪表盘上显示像屏幕，执行以下操作：

• 每5分钟它使一个JSONP调用和检索一个“总数”
• 然后它通过递增最后显示的总数直到它等于新的总数来将该数字显示在屏幕上。 （数量永远只能增加）

我有一些麻烦让数增量的顺利进行。我想要做的是找到一个三角洲（即新的总数 - 旧的总数），并在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，它工作正常。这与你所拥有的没有什么不同，减去最后一行代码。