Javascript循環＆setInterval

Question

這js將採取一個值，從它減去X的金額，然後數到該值。

我試圖通過做一個簡單的while循環來完成這個任務，但我無法完成它的工作。

我想知道是否有人可以評論如何或爲什麼下面的while循環方法不起作用。

這是我能得到它的工作的唯一辦法：

function _initCountUpUsers() 
{ 
    var totalUsers = $('#totalUsers'); 
    var ceiling = parseInt(totalUsers.html()); 
    var floor = ceiling - 10; 

    function updateTotalUsers() 
    { 
     if(floor < ceiling) 
     { 
      totalUsers.html(floor); 
      floor++; 
     } 
    } 

    window.setInterval(updateTotalUsers, 1000, floor); 
} 

非工作時方法：

function _initCountUpUsers() 
{ 
    var totalUsers = $('#totalUsers'); 
    var ceiling = parseInt(totalUsers.html()); 
    var floor = ceiling - 10; 

    function updateTotalUsers() 
    { 
     totalUsers.html(floor); 
     floor++; 
    } 

    while(floor < ceiling) 
    { 
     window.setInterval(updateTotalUsers, 1000, floor);  
    } 

} 

Answer 1

我不知道爲什麼你不想堅持你的第一種方法，但是......

while(floor < ceiling) 
{ 
    window.setInterval(updateTotalUsers, 1000, floor);  
} 

這將啓動10個獨立的定時器，每一套火一次第二，每套增加樓層和更新總用戶，他們都沒有終止。如果他們要開火，你會看到每秒增加十點，而在第一個例子中增加一個。然而，他們都不會真的開火，因爲你會永遠循環等待樓達到天花板！

JavaScript是單線程的。事件（包括定時器）在執行腳本時排隊。所以你的while循環將永遠不會終止，因爲更新它的定時器事件將等待啓動，直到它完成執行！

即使不是這樣，你仍然有十個計時器，每個計時器永遠運行。

您的第一個方法正處於正確的軌道上。你只需要停止計時器：

function _initCountUpUsers() 
{ 
    var totalUsers = $('#totalUsers'); 
    var ceiling = parseInt(totalUsers.html()); 
    var floor = ceiling - 10; 

    function updateTotalUsers() 
    { 
     if(floor < ceiling) 
     { 
      totalUsers.html(floor); 
      floor++; 
     } 
 else { window.clearInterval(timerID); // stop firing the timer once per second } 
    } 

    var timerID = window.setInterval(updateTotalUsers, 1000, floor); 
}

如果您正在尋找寫這稍微乾淨/不易出錯的方式，只是自己編寫了一個小幫手程序：

function while_interval(proc, int) 
{ 
    var timerID = setInterval(function() 
    { 
    if (!proc()) clearInterval(timerID); 
    }, int); 
} 

。 ..和調用它像這樣：

while_interval(function() 
{ 
    if (floor < ceiling) 
    { 
    totalUsers.html(floor); 
    floor++; 
    return true; 
    } 
}, 1000); 

這讓你抽象掉的看家代碼一點點，但更重要的是它迫使你自覺返回true只要你希望INT erval-loop繼續執行。

Answer 2

function _initCountUpUsers() 
{ 
    var totalUsers = $('#totalUsers'), 
     ceiling = parseInt(totalUsers.html()), 
     floor = cieling - 10, 
     intRef = null; 

    function updateTotalUsers() 
    { 
     if(floor < ceiling) 
     { 
      totalUsers.html(floor); 
      floor++; 
     } 
     else { 
      window.clearInterval(intRef); 
     } 
    } 

    intRef = window.setInterval(updateTotalUsers, 1000); 
} 

或

function _initCountUpUsers() 
{ 
    var totalUsers = $('#totalUsers'); 
    var ceiling = parseInt(totalUsers.html()); 
    var floor = cieling - 10; 
    var int; 

    function updateTotalUsers() 
    { 
     if(floor < ceiling) 
     { 
      totalUsers.html(floor); 
      floor++; 
      window.setTimeout(updateTotalUsers, 1000); 
     } 
    } 

    window.setTimeout(updateTotalUsers, 1000); 
}