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

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

javascript html

JavaScript：在值之间暂停的简单计数器不起作用,javascript,html,Javascript,Html,我是JavaScript的初学者，我尝试编写简单的代码来打印数字0-100，但在打印过程中会暂停，每隔3秒暂停一次。代码无法正常工作。。。它等待3秒钟，然后打印我的案例中的最后一个数字100。你能帮帮我吗，我的错在哪里？代码如下： <html> <head> <script type="text/javascript"> function funkcija_polnac() { var i = 0; while (i &

我是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>

您的代码所做的是调度101函数回调，所有回调都将在代码运行大约三秒钟后一个接一个地发生，并且所有回调都将使用i变量，而不是函数创建时的值。三秒钟后，得到101次迭代的值101。这是因为您正在创建的函数更准确地说是i变量上的闭包，即创建变量的上下文，因此它们对变量有一个持久的引用，并在使用变量时看到它的值，而不是在创建变量时看到它的值。有关我的博客上的闭包的更多信息：

或者至少，如果它不是那个文档，你会看到它。write在初始解析后使用时，会完全破坏页面。基本上：不要使用document.write.：-

要解决这个问题，您可以安排对函数的单个调用，一旦函数运行，就安排下一个调用。您可以使用DOM或类似的文档，而不是document.write来查看输出

例如：

//注意：我使用了30毫秒而不是3000毫秒，所以它运行得更快 var i=0； showOne；函数showOne{ 显示i； ++一,；

如果我你的代码所做的是安排101次函数回调，所有这些回调都会在代码运行大约3秒钟后一个接一个地发生，并且所有回调都会使用i变量，而不是函数创建时的值。因此，在3秒钟后，你会得到101次值101的迭代。这是因为你的函数是c更准确地说，创建是i变量上的闭包，即创建变量的上下文，因此它们对变量有持久的引用，并在使用变量时看到它的值，而不是创建变量时看到它的值。有关闭包的更多信息，请访问我的博客：

或者至少，如果不是那个document.write，您会看到它，当在初始解析后使用时，会完全破坏页面。基本上：不要使用document.write.：-

要解决这个问题，您可以计划对一个函数的一次调用，该函数一旦运行，就会计划下一次调用。您可以使用DOM或类似工具，而不是document.write来查看输出

例如：

//注意：我使用了30毫秒而不是3000毫秒，所以它运行得更快 var i=0； showOne；函数showOne{ 显示i； ++一,；

如果我那么，在超时发生之前，您正在运行while。试试这个

函数funkcija_polnaci { document.getElementByIdoutput.innerHTML=i+%；如果-i>-1{ setTimeoutfunction{funkcija_polnaci；}，3000； } } 开始

嗯，您正在超时前运行while。请尝试此操作

函数funkcija_polnaci { document.getElementByIdoutput.innerHTML=i+%；如果-i>-1{ setTimeoutfunction{funkcija_polnaci；}，3000； } } 开始

可能应该对javascript中的闭包进行一些研究。如果下面的答案中有一个回答了您的问题，那么这种方式是有效的，而不是发布感谢答案，您可以通过单击旁边的复选标记来接受答案。更多：可能应该对javascript中的闭包进行一些研究。如果下面的答案中有一个回答了您的问题，则t他这样做很有效，而不是发布感谢答案，你可以点击旁边的复选标记来接受答案。更多：欢迎使用StackOverflow！欢迎使用StackOverflow！@Toniristski:很高兴这有帮助。@Toniristski:很高兴这有帮助。