Javascript 闭包问题

Question

出于某种原因，我的代码没有按预期运行。我确信代码没有任何问题，但似乎我看不到它。请帮助我了解发生了什么。代码应该循环并在 2 秒 interval.ie 后显示数字 10-0。 10-9-8.. 每 2 秒后。它每隔 2 秒显示一次数字，但按升序而不是降序显示。我真的很想使用 for 循环而不是解决方法。下面是我的代码。

function fadeOut(elem)
{
    for( var i=10; i>0; i-- )
    {
        (function(index)
        {
            setTimeout(function()
            {
                console.log(index);
            }, index * 2000);
        })(i);
    }
}

Answer 1

你做的第一件事就是说，"In 10 seconds, print '10'."

然后你说，"In 9 seconds, print '9'."

以此类推。 "In 1 seconds, print '1'."

999 毫秒后，它执行您要求的最后一件事并打印“1”。

尝试：

function fadeOut(elem)
{
    for( var i=10; i>0; i-- )
    {
        (function(index)
        {
            setTimeout(function()
            {
                console.log(index);
            }, (10-index) * 2000);
        })(i);
    }
}

Answer 2

它创建了 10 个超时，它们是：

10 秒后 - log 10
9 秒内 - 记录 9
8 秒后 - log 8
7 秒后 - log 7

...

1 秒内 - log 1

你想要做的是在减少计数器的同时增加时间，像这样：

function fadeOut(elem)
{
  for ( var i = 10; i > 0; --i )
  {
    (function(index)
     {
      setTimeout( function(){
        console.log(index);
      }, (11-index)*2000);
    })(i);
  }
}

<button onclick="fadeOut(this)">Click</button>

Javascript 闭包问题

Javascript closures gotcha

javascript

settimeout