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个单独的计时器，每个计时器每秒触发一次，每个计时器设置为递增 floor 并更新 totalUsers ，并且它们都不会终止。如果它们要开火，你会看到计数每秒增加十，而第一个例子则增加一。但是，它们都不会实际触发，因为您将永远循环等待 floor 到达 ceiling ！

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。

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

Javascript Loop＆amp;的setInterval

2 个答案: