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

Javascript循环设置间隔(&S)

  •  2
  • doremi  · 技术社区  · 14 年前

    我试图通过做一个简单的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 回复  |  直到 14 年前
        1
  •  3
  •   Shog9    11 年前

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

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

        2
  •  -1
  •   andres descalzo    14 年前
    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);
    }