Javascript关闭了

Question

出于某种原因，我的代码表现不像预期的那样。我确信代码没有任何问题，但似乎我无法看到它。请帮我理解发生了什么。该代码应循环通过并在2秒间隔后显示数字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

你做的第一件事就是说，“在10秒钟内，打印'10'。”

然后你说，“在9秒内，打印'9'。”

依此类推。 “在1秒内打印'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秒内 - 记录10
• 在9秒内 - 记录9
• 在8秒内 - 记录8
• 在7秒内 - 记录7

...

• 在1秒内 - 记录1

你想要做的是在减少计数器的同时增加时间，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;