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);
}

无效的 While 方法:

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 个独立的计时器，每个计时器设置为每秒触发一次，每个计时器设置为递增 floor 并更新 totalUsers，并且它们都不会终止。如果他们开火，您会看到计数每秒增加 10，而在第一个示例中增加 1。然而，它们都不会真正触发，因为您将永远循环等待地板到达天花板!

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++;
        }
<b>        else
        {
          window.clearInterval(timerID); // stop firing the timer once per second
        }</b>
    }

    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。