JavaScript：在值之间具有暂停的简单计数器不起作用

Question

I'm starter in JavaScript and I try to make simple code to print numbers (0-100) , but with pause in printing, for every next number(for exp. 3 seconds pause). 我是JavaScript的入门者，我尝试制作简单的代码来打印数字（0-100），但是每下一个数字都会暂停打印（暂停3秒钟）。 Code doesn't work properly... It waits 3 seconds and print the last number (100 in my case). 代码无法正常运行...等待3秒钟，然后打印最后一个数字（本例中为100）。 Can you help me, where is my mistake? 您能帮我吗，我的错误在哪里？ This is the code: 这是代码：

<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

What your code does is schedule 101 function callbacks, all of which will happen one right after another about three seconds after the code runs, and all of which will use the i variable , not its value as of when the function was created. 您的代码要做的是调度101函数回调，所有这些回调将在代码运行大约三秒钟后一次接一个发生，并且所有这些回调都将使用i 变量，而不是函数创建时的值。 So after three seconds you get 101 iterations of the value 101. This is because the functions you're creating are "closures over" the i variable (more accurately, the context in which the variable was created), and so they have an enduring reference to the variable and see its value as of when they use it, not as of when they were created. 因此，三秒钟后，您将获得101值的101次迭代。这是因为您创建的函数是i变量的“闭包”（更准确地说，是创建变量的上下文），因此它们具有持久性引用变量，并在使用变量时查看其值，而不是在创建变量时查看其值。 More about closures on my blog: Closures are not complicated 有关我的博客上的闭包的更多信息： 闭包并不复杂

Or at least, that's what you'd see if it weren't that document.write , when used after initial parsing, blows away the page entirely. 至少，如果不是那个document.write ，那将是您看到的，在初始解析后使用时，整个页面会被炸掉。 Basically: Don't use document.write . 基本上：不要使用document.write 。 :-) :-)

To fix it, you would schedule a single call to a function that, once it's run, schedules the next call. 要解决此问题，您可以安排对函数的单个调用，该函数一旦运行，就计划下一个调用。 And you'd use the DOM or similar rather than document.write to see the output. 然后，您将使用DOM或类似内容而不是document.write来查看输出。

Example: 例：

 // 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

Well, you are running your while before the timeout happens. 好吧，您正在等待超时发生。 Try this 尝试这个

 <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