代码之家 › 专栏 › 技术社区 › doremi

Javascript循环设置间隔(&S)

setinterval while-loop jquery javascript

doremi · 技术社区 · 15 年前

我试图通过做一个简单的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);       
    }

}

2 回复 | 直到 15 年前

Shog9 12 年前

我不知道你为什么不想坚持你的第一种方法,但是。。。

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

和更新没有一个会终止。如果他们开火,你会看到计数每秒增加10,而在你的第一个例子中是1。但是,没有一个会真正开火,因为你会一直循环等待地板达到 天花板

JavaScript是单线程的 while 循环永远不会终止,因为更新它的计时器事件将等待触发,直到它完成执行!

即使不是这样,你仍然有10个计时器,每个计时器永远运行。

你的第一种方法是对的。你只需要停止计时器:

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 只要您希望间隔循环继续执行。

-1

andres descalzo 15 年前

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