平穩遞增數與JS

可變的時間我有一個非常簡單的JS櫃檯，我在儀表盤上顯示像屏幕，執行以下操作：平穩遞增數與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分鐘的開始，然後停止，所以它不完全正確...

來源

2011-03-07 Ganesh Shankar

試試這個：

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分鐘的間隔）

來源

2011-03-07 01:22:52

謝謝Sime，我試了你的代碼（和幾個變體），但我似乎反覆打了服務器，並沒有渲染總數。我調試，發現增量變爲= 1，它發送了大量的請求（直到服務器的數據庫被窒息）... – 2011-03-07 02:44:35

@Ganesh哎呀，對不起''）'我只是注意到在我的代碼中我忘了在回調函數中定義'data'參數。這可能導致了這種行爲。 – 2011-03-07 02:54:04

@Ganesh遲到了，我明天再看看這個...... – 2011-03-07 02:55:42

我不完全確定爲什麼你的代碼不能按預期工作，雖然我懷疑它與行LAST_NUMBER_OF_SESSIONS = new_value;有關。我寫了something similar，它工作正常。這與你所擁有的沒有什麼不同，減去最後一行代碼。

來源

2011-03-07 01:20:21 Haochi

我想你可能會到一些信息（憤怒地重構代碼...;）） – 2011-03-07 03:08:14

平穩遞增數與JS

回答

相關問題