Javascript 定期添加文本_Javascript

Javascript 定期添加文本

javascript

Javascript 定期添加文本,javascript,Javascript,我正在尝试用JavaScript运行小片段代码，我希望每5秒在网页上编写一次简单的hello world。我想一定没问题，但不，我还是只得到了第一个hello world，没有更多。你能帮我一把吗？谢谢 <script type="text/javascript"> var i=0; function startTimer() { window.setTimeout('refresh()',5000); } function refresh() { doc

我正在尝试用JavaScript运行小片段代码，我希望每5秒在网页上编写一次简单的hello world。我想一定没问题，但不，我还是只得到了第一个hello world，没有更多。你能帮我一把吗？谢谢

 <script type="text/javascript">
 var i=0;

 function startTimer() {

    window.setTimeout('refresh()',5000);
 }

 function refresh() {

 document.write("Hello world "+i+"<br/>");
 i++;
 window.setTimeout('startTimer()',1);
 } 

 startTimer();
 </script>


var i=0；
函数startTimer（）{
setTimeout（'refresh（）'，5000）；
}
函数刷新（）{
写下“你好世界”+i+“
”；
i++；
setTimeout（'startTimer（）'，1）；
} 
startTimer（）；
主要问题是文档。编写。setTimeout
或代码的其余部分没有问题
它不起作用的原因是，一旦第一次调用document.write，它将覆盖现有的setTimeout（）代码，因为没有代码，所以它将不起作用。
您需要做的是使用其他方法在页面中写入值，当然不是文档
不要使用setInterval
而是使用setTimeout

你可以试试这个
<html>
   <body>
    <div id="clock" ></div>
    <script type="text/javascript">
      var i = 0,
         timerHandle,
         clock;

      function startTimer() {
          clock = document.getElementById('clock');
          //You can use timerHandle, to stop timer by doing clearInterval(timerHandle)  
          timerHandle = self.setInterval(funRefresh, 2000);
      }

      var funRefresh = function refresh() { 
         clock.innerHTML += "Hello world " + i++ + "<br/>";
      } 
      startTimer();
    </script>
  </body>
 </html>


var i=0，
timerHandle，
时钟；
函数startTimer（）{
clock=document.getElementById（'clock'）；
//您可以使用timerHandle，通过执行clearInterval（timerHandle）停止计时器
timerHandle=self.setInterval（funRefresh，2000）；
}
var funRefresh=函数refresh（）{
clock.innerHTML++=“你好世界”+i++“
”；
} 
startTimer（）；

希望这对您有所帮助。
注意：正如Amar Palsapure在回答中指出的，问题的根本原因是使用了文档。编写。在我的演示中，我使用p
元素document.body.appendChild（）
将文本添加到屏幕中
您可以使用setTimeout（）
，但必须使其取决于最后一次运行的setTimeout（）
；因此，每次调用程序运行时，它都会创建下一个超时
setInterval（）
设计为以“常规”间隔运行（无论是setTimeout（）
还是setInterval（）
在运行时都不可靠）；但是，如果对setInterval（）
的调用由于其他进程阻止其执行而被备份（Javascript是单线程的），那么这些排队的回调可能会出现问题。这就是为什么我喜欢下面的方法
注意，不要使用setTimeout（'funcCalled（）'，100）
；这是在您传入的字符串上运行eval（）
，这可能会更改您运行回调的范围，并且由于与eval（）
相关的安全问题而被视为“邪恶”。你最好完全避免
编辑-略微修改
我对方法做了一些改变。见我的评论
// The first and last lines comprise a self-executing,
// anonymous function, eg, (function(){})();.
// This allows me to use a local function scope and not the
// global window scope, while still maintaining my variables
// due to it being a "closure" (function(){}).
(function(){
    var i = 0,
        timer = 5000,
        // I'm just going to add this to the DOM.
        text = document.createElement('p'); 

    // This is a variable function, meaning it stores a 
    // reference to a function.
    var helloWorld = function() {
        // Here is where I add the Hello World statement
        text.innerHTML += 'Hello World! Loop: ' + i++ + '<br/>';
        // Them add it to the DOM.
        document.body.appendChild(text);

        // I added this so it wouldn't run forever.
        if (i < 100) {
            // A setTimeout() will be added each time the last
            // was run, as long as i < 100.
            // Note how I handle the callback, which is the
            // first argument in the function call.
            setTimeout(helloWorld, timer);
        }

        // I added the change so it wouldn't take so long 
        // to see if was working.
        timer = 500;
    }

    // Here I use a variable function and attach it to the
    // onload page event, so it will run when the page is
    // done loading.
    window.onload = helloWorld;
})();

//第一行和最后一行组成一个自动执行的，
//匿名函数，例如，（function（）{}）（；）；。
//这允许我使用本地函数作用域，而不是
//全局窗口范围，同时仍保持我的变量
//因为它是一个“闭包”（function（）{}）。
（功能（）{
var i=0，
定时器=5000，
//我只是想把它添加到DOM中。
text=document.createElement（'p'）；
//这是一个变量函数，意味着它存储
//对函数的引用。
var helloWorld=函数（）{
//这里是我添加helloworld语句的地方
text.innerHTML++='Hello World！Loop:'+i++'
'；
//他们将其添加到DOM中。
document.body.appendChild（文本）；
//我添加了这个，这样它就不会永远运行了。
如果（i<100）{
//每次上一次更新时都会添加一个setTimeout（）
//只要我<100，就可以运行。
//注意我如何处理回调，这是
//函数调用中的第一个参数。
setTimeout（helloWorld，计时器）；
}
//我加了零钱，所以不会花那么长时间
//看看是否有效。
定时器=500；
}
//这里我使用一个变量函数并将其附加到
//onload page事件，因此它将在打开页面时运行
//完成加载。
window.onload=helloWorld；
})();

这是工作程序
var i=0；
函数startTimer（）{
设置间隔（刷新，5000）；
}
函数刷新（）{
写下“你好世界”+i+“
”；
i++；
//设置超时（startTimer，1）；
}
startTimer（）；
谢谢，但当我将此代码添加到测试页面时，它仍然只显示Hello World 0，仅此而已：-（使用refresh，我尝试写入包含Hello World的行，每次都递增。因此输出应该是Hello World 0，在5秒换行符和Hello World 1之后…Commentwindow。在refresh
函数中设置timeout
。让我试试jsFiddle.netCommented，仍然有相同的问题setTimeOut（）
也可以工作，这取决于您如何使用它。请参阅我的答案以获取示例（尽管setInterval（）
在这里也有意义）。存在一些问题。当您使用document.write
时，下一个setinterval
将被清除。如果您使用div
并将数据附加到div
中，它将起作用。setTimeout（）
和setinterval（）
？这将在太长时间后运行。我已经使代码正常工作。无论如何，我已经注释掉了初始代码中的setTimeout。此代码正常工作是因为使用了document.append
，并且在p
元素的帮助下也使用了它。有疑问的是使用了document.write，如果在这里使用，则使用此code也不起作用。是的，你是对的；这是代码发布时的主要问题。
    var i = 0;

function startTimer() {
    window.setInterval(refresh, 5000);
}

function refresh() {
    document.write("Hello world " + i + "<br/>");
    i++;

   // window.setTimeout(startTimer,1);
}

startTimer();