Javascript關閉gotcha

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秒內 - log 7

...

• 在數秒 - 數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>