需要帮助修复 JavaScript 中的 setInterval 问题答案

【问题标题】：Need help fixing setInterval issue in JavaScript需要帮助修复 JavaScript 中的 setInterval 问题
【发布时间】：2015-10-15 19:05:40
【问题描述】：

昨天，我被告知setInterval 在一定毫秒数后执行任务或功能。我的代码中有间隔工作，但每次它都会创建一个带有日期的新文本行。我希望它在每个间隔结束后替换前一个。我尝试通过将文本和日期定义为要调用的变量来解决此问题，但这也不起作用。另外，有兴趣的朋友，here's the link to my question yesterday, which received very helpful responses.

<html>
<head>
<title>Time Stuff Page</title>

</head>
<link href="main.css" rel="stylesheet" type="text/css">
<body>
    <!-- adding color style for demo date buttons via CSS style tag->
<style type="text/css">
    #demo {
        color:red;
         }
    #demo2 {
        color:blue;
        }   
    </style>

<!-- Display date in paragraph -->
<button onclick="getElementById('demo').innerHTML=Date()">The time is? (from innerhtml)</button>
<p id="demo"></p>

<!-- Display date by calling a JS function -->
<button onclick="displayDate()">The time is? (from javascript)</button>
<p id="demo2"></p>

<!-- Display date inside "this" button -->
<button onclick="this.innerHTML=Date()">The time is? (display in button)</button>

<p></p>

<script language="javascript"> 
function displayDate() {
document.getElementById("demo2").innerHTML = Date();
}

var savedate = Date();
document.write("You loaded the page at: "+savedate);

//constantly updated date();
constantDate = function() {
var date = Date();
var timetext = "<br />Updated time is: "+date;
    document.write(timetext);
}

function checkDate() {
setInterval(function(){ constantDate(); }, 10);
}

checkDate();



</script>
</body>
</html>

【问题讨论】：

不要使用文档写入。

标签： javascript html function date setinterval

【解决方案1】：

创建类似于displayDate的函数：

function displayDate2() {
   var timetext = "Updated time is: "+Date();
   document.getElementById("demo3").innerHTML =timetext;
}

您还需要在正文中添加另一个段落：

<p id="demo3"></p>

【讨论】：

哦，只要变量是用 Date() 定义的，无论何时调用它都会更新？甜的！我实际上把我需要的另一个
放在上面的原始代码中，我想我只是忘记了它，因为我没有把它当作任何东西。我还有一个问题，实际上并不值得再发一个帖子，所以我就在这里问。为什么当我尝试使用 while(0==0) 循环来运行函数循环时，它不会加载页面？这是因为循环会永远持续下去吗？计算机不能永远继续显示 date() 吗？
这篇文章：stackoverflow.com/a/4575011/5151500很好地解释了为什么在某些js函数运行时DOM没有更新。

【解决方案2】：

问题是您的 JavaScript 文件在运行时立即调用“checkDate()”函数。这意味着它将运行“constantDate()”函数，并且该函数正在使用 document.write 来输出结果。

因此，它将使用该输出向您的文档发送垃圾邮件，而不是将其插入到 div 中。将其设置为像这样在“constantDate()”函数内插入一个 div，然后创建该 div，一切都应该没问题：

constantDate = function() {
    var date = Date();
    var timetext = "<br />Updated time is: "+date;
    document.getElementById("demo3").innerHTML = timetext;
}

并创建 div 类：

<p id="demo3"></p>

此外，通常最好将 HTML 代码和 JavaScript 代码分开，因此不要将 JS 代码或函数添加到按钮 HTML 的“onclick=”属性中，而是像这样在 JS 中添加点击事件：

HTML:
<button id="button2">The time is? (from javascript)</button>

JavaScript:
/* On click event for button 2 */
var button2 = document.getElementById('button2');
button2.onclick = function() {
    displayDate();   
}

检查我为您完成的这个 JS Fiddle：http://jsfiddle.net/filipetedim/t0to0hL8/

【讨论】：

是的，我在原始帖子中有
标签，我只是没有识别它并忘记调用 ID（它不存在）。现在它可以使用 setInterval 调用函数了！至于将id添加到按钮，谢谢你的建议！这是否意味着我可以稍后在 JS 中更改该按钮的 onclick 功能？我假设它与更改变量或创建新的 onclick 函数相同。我正在测试其他 HTML 元素的 id，但我找不到所有可以访问 id 属性的 HTML 标记的好来源。
当然可以。你几乎可以在 JS 中做任何你想做的事情，这只是在客户端的范围内。
我打算将一些笔记上传到我自己创建的 github，以帮助了解 javascript 中变量的作用域，但我不知道如何在 mac 上正确使用 github，所以我会转给我的老朋友pastebin。 Here's the link if you are interested
不妨在 jsfiddle 上创建一个帐户，它会永久保存您的文件。