在JS中以可变的时间段平滑地增加一个数字答案

【问题标题】：Incrementing a number smoothly with a variable time period in JS在JS中以可变的时间段平滑地增加一个数字
【发布时间】：2011-03-07 00:26:45
【问题描述】：

我有一个非常简单的 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 分钟开始时非常快地增加数字，然后停止，所以它不完全正确......

【问题讨论】：

标签： javascript jquery

【解决方案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 分钟的间隔。）

【讨论】：

感谢 Sime，我尝试了您的代码（以及几个变体），但我似乎反复访问服务器并且没有呈现总数。我调试并发现 delta 正在变为 = 1 并且它正在发送大量请求（直到服务器的数据库被阻塞）......
@Ganesh 哎呀，对不起:) 我刚刚在我的代码中注意到我忘记在回调函数中定义data 参数。这可能导致了这种行为。
@Sime 谢谢！感谢您的帮助:)

【解决方案2】：

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

【讨论】：

我认为你可能正在做某事......（疯狂地重构代码......;））