我正在建立一个聊天系统，并且正在使用AJAX技术异步加载平面.txt文件。
在上面的AJAX技术旁边，我还有一个按钮，可让您手动启动和停止重新加载平面.txt文件。
开始重新加载时，它将每秒/ 1000ms执行一次。
到目前为止，很好..问题是当我想用clearInterval函数清除setInterval函数时。它只能工作一次，并且在通过“开始”按钮重新开始文档的重新加载之后，无法用另一个“停止”按钮阻止它再次重新加载。
我已经尝试了关于setInterval和clearInterval的关于stackoverflow的几乎所有解决方案，但是它们似乎都没有提供解决方案，或者有些线程只是打开而没有解决方案。甚至有可能停止然后重新启动？然后再次停止等等。
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("chatlog").innerHTML = this.responseText;
}
};
xhttp.open("POST", "chatlog.txt", true);
xhttp.send();
}
function scrollWin(x,y) {
window.scrollBy(x,y);
}
var reload = setInterval(loadDoc,1000);
var myStartFunction = function () {
var begin = setInterval(loadDoc,1000);
}
var myStopFunction = function() {
var stop = clearInterval(reload);
}
var elmnt = document.getElementById("chatlog");
function scrollToTop() {
elmnt.scrollIntoView(true); // Top
}
function scrollToBottom() {
elmnt.scrollIntoView(false); // Bottom
}
var autoScroll = setInterval(function () {scrollToBottom()},3000);
function stopAutoScroll() {
clearInterval(autoScroll);
}BODY
{
margin: 0;
}
.container-one
{
width: 25%;
}
.buttons
{
position: fixed;
border-right: 1px solid #000000;
height: 100%;
z-index: 1;
top: 0px;
background-color: #7F7F7F;
}
.buttons UL
{
list-style-type: none;
margin: 0;
padding: 0;
}
.buttons LI BUTTON
{
width: 100%;
display: block;
border: 1px solid #020202;
padding: 10px;
}
.firstbox
{
margin-left: 240px;
overflow: auto;
margin-top: 115px;
/*[disabled]border:1px solid #000000;*/
}
.chatheader H1
{
text-align: center;
padding: 20px;
margin: 0 auto 0 9%;
border-bottom: 5px solid #000000;
position: fixed;
background-color: #7C7C7C;
top: 0px;
width: 100%;
}
.firstbox P
{
margin-left: auto;
margin-right: auto;
/*[disabled]border:0px solid #000000;*/
/*border-radius: 20px*/
padding: 10%;
background-color: #E0E0E0;
width: 50%;
/*[disabled]height:300px;*/
/*[disabled]overflow:scroll;*/
text-align: center;
}
#chatlog
{
height: auto;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="chatstyle-reload.css">
<meta charset="utf-8" />
<!--<meta http-equiv="refresh" content="5" > -->
<title>Test page for requesting a webpage with the AJAX technique!</title>
</head>
<body>
<div class="container-one">
<div class="buttons">
<ul>
<li><button type="button" onclick="loadDoc()">Request the chatlog</button></li>
<li><button type="button" id="reloadBtn" onclick="myStartFunction()">Start updating the chatlog</button></li>
<li><button type="button" id="stopBtn" onclick="myStopFunction()">Stop reloading the chatlog</button></li>
<li><button type="button" onclick="document.getElementById('chatlog').innerHTML = 'Chatlog is hidden'">Hide chatlog</button></li>
<li><button type="button" onclick="scrollWin(0,-50)">Go to top of page</button></li>
<li><button type="button" onclick="scrollWin(0,200)">Go to bottom of page</button></li>
<li><button type="button" onclick="scrollToTop()">Scroll to the top of the element</button></li>
<li><button type="button" onclick="scrollToBottom()">Scroll to the bottom of the element</button></li>
<li><button type="button" onclick="stopAutoScroll()">Stop autoscroll</button></li>
<li><button type="button"> <a href="http://www.checkandtest.nl">Go back => to checkandtest.nl</a></button></li>
</ul>
</div>
</div>
<div class="chatheader">
<h1>Display the current chatlog in real-time</h1>
</div>
<div class="firstbox">
<p id="chatlog"></p>
</div>
<script src="functions.js"> </script>
</body>
</html>
答案 0 :(得分：1)
您的问题在这里：
var reload = setInterval(loadDoc,1000);
var myStartFunction = function () {
var begin = setInterval(loadDoc,1000);
}
var myStopFunction = function() {
var stop = clearInterval(reload);
}
您可以通过setInterval创建一个interal并将其存储到reload中，可以正确地停止它，但是当您再次通过myStartFunction重新启动时，可以将其存储到一个本地未使用的变量中begin，在停止时，您打算停止ID为reload的间隔，该间隔已经停止。相反，您将需要像这样更改myStartFunction：
var myStartFunction = function () {
myStopFunction(); //Stop any previous unstopped interval
reload = setInterval(loadDoc,1000);
}
编辑
在这里，我详细说明了在此答案的上一次编辑之前遇到的问题。在最后一次编辑之前，我们已 var reload = setInterval（loadDoc，1000）;在myStartFunction的内部，它创建了一个名为reload的局部变量，但是此局部变量“遮盖了”名为reload的外部变量，因此，我们正在设置局部变量的值，并且希望将该值分配给全局变量。就我而言，这是一个错字，但很好解释。让我举个例子：
var myVariable = 1;
function foo() {
var myVariable = 2;
}
foo();
console.log(myVariable); //1
如您所见，我们有两个名为myVariable的变量。在该函数的范围内，我们创建了一个具有相同名称的变量，并将其值分配为2。即使我们调用该函数，外部变量也不会出错。现在，让我们删除函数内的var关键字：
var myVariable = 1;
function foo() {
myVariable = 2;
}
foo();
console.log(myVariable); //2
答案 1 :(得分：1)
我找到了一个临时解决方案。现在，我可以开始和停止文档的重新加载了。.但是，当我通过buttonclick两次调用“ myStartFunction”时，再也无法通过“ myStopFunction” buttonclick停止它了。
所以即使我不知道自己做了什么，我也解决了1个问题，然后又创建了一个。
问题似乎是'var'关键字。.我从'reload'变量中删除了'var'。而且我还在代码“ myStartFunction”块中添加了“ return reload”语句。
我不确切知道它为什么起作用，我感到很奇怪，我必须这样做。.但是我确实在另一个网站上找到了一些东西，说当您声明不带'var'关键字的变量时在javascript中，变量变为全局变量。我怀疑它与范围或setInterval创建的不可访问变量有关。
请记住，'setInterval'函数的每个调用实例都会创建一个新的id，并且我们需要一种从每个实例访问新创建的'setInterval'id的方法，以便通过'clearInterval'停止它。
因此，我们摆脱了@Lajos Arpad的建议：
var myStartFunction = function () {
myStopFunction(); //Stop any previous unstopped interval
var reload = setInterval(loadDoc,1000);
}
对此：
var myStartFunction = function () {
reload = setInterval(loadDoc,1000);
return reload;
}
var myStopFunction = function () {
console.log("Stop reloading the document " + reload);
clearInterval(reload);
}
reload = setInterval(loadDoc,1000);
document.getElementById("reloadBtn").addEventListener("click", myStartFunction);
document.getElementById("stopBtn").addEventListener("click", myStopFunction);
loadDoc();
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("chatlog").innerHTML = this.responseText;
}
};
xhttp.open("POST", "chatlog.txt", true);
xhttp.send();
}