JavaScript：在值之間具有暫停的簡單計數器不起作用

Question

我是JavaScript的入門者，我嘗試制作簡單的代碼來打印數字（0-100），但是每下一個數字都會暫停打印（暫停3秒鍾）。 代碼無法正常運行...等待3秒鍾，然后打印最后一個數字（本例中為100）。 您能幫我嗎，我的錯誤在哪里？ 這是代碼：

<html>
<head>
<script type="text/javascript">    
 function  funkcija_polnac()
 { 
     var i = 0;
     while (i <= 100) {
             setTimeout(function(){ document.write(i + '%');}, 3000);            
             i++;                 
     }
 }</script> 

</head>
<body>     
  <div style="margin: 0px auto;"  onclick="funkcija_polnac()">Start</div>
</body>
</html>

Answer 1

您的代碼要做的是調度101函數回調，所有這些回調將在代碼運行大約三秒鍾后一次接一個發生，並且所有這些回調都將使用i 變量，而不是函數創建時的值。因此，三秒鍾后，您將獲得101值的101次迭代。這是因為您創建的函數是i變量的“閉包”（更准確地說，是創建變量的上下文），因此它們具有持久性引用變量，並在使用變量時查看其值，而不是在創建變量時查看其值。有關我的博客上的閉包的更多信息： 閉包並不復雜

至少，如果不是那個document.write ，那將是您看到的，在初始解析后使用時，整個頁面會被炸掉。 基本上：不要使用document.write 。 :-)

要解決此問題，您可以安排對函數的單個調用，該函數一旦運行，就計划下一個調用。 然后，您將使用DOM或類似內容而不是document.write來查看輸出。

例：

 // NOTE: I used 30ms rather than 3000ms so it runs faster var i = 0; showOne(); function showOne() { display(i); ++i; if (i <= 100) { setTimeout(showOne, 30); // You'd really want 3000 } } // Displays the given message by adding a paragraph element to the page function display(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); }

 p { padding: 0; margin: 0; font-family: sans-serif; }

Answer 2

好吧，您正在等待超時發生。 嘗試這個

 <html> <head> <script type="text/javascript"> function funkcija_polnac(i) { document.getElementById("output").innerHTML = i + "%"; if (--i > -1) { setTimeout(function () { funkcija_polnac(i); }, 3000); } } </script> </head> <body> <div style="margin: 0px auto;" onclick="funkcija_polnac(5)">Start</div> <div id="output"></div> </body> </html>

JavaScript：在值之間具有暫停的簡單計數器不起作用

問題描述

2 個解決方案

解決方案1
4 2014-12-15 13:21:37

解決方案2
0 已采納 2014-12-15 13:22:20

JavaScript：在值之間具有暫停的簡單計數器不起作用

問題描述

2 個解決方案

解決方案1 4 2014-12-15 13:21:37

解決方案2 0 已采納 2014-12-15 13:22:20

解決方案1
4 2014-12-15 13:21:37

解決方案2
0 已采納 2014-12-15 13:22:20