在使用 setInterval 加载后，如何停止使用 AJAX 重新加载 .txt 文件？

Question

我正在构建一个聊天系统，我正在使用 AJAX 技术异步加载平面 .txt 文件。

除了上面的 AJAX 技巧之外，我还有一个按钮可以让您手动开始和停止重新加载平面 .txt 文件。

当您开始重新加载时，它将每隔 second/1000ms 执行一次。

到目前为止一切顺利。当我想用 clearInterval 函数清除 setInterval 函数时，问题就来了。它只工作一次，在我通过开始按钮重新开始加载文档后，我无法阻止它再次使用另一个停止按钮重新加载。

关于 setInterval 和 clearInterval，我已经尝试了几乎所有关于 Whosebug 的解决方案，但其中 none 似乎提供了解决方案，或者一些线程只是保持打开状态而没有解决方案。甚至可以停止并重新启动吗？然后再次停止等..

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>

Answer 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 的局部变量，但是这个局部变量 "shadows" 外部变量称为 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

在使用 setInterval 加载后，如何停止使用 AJAX 重新加载 .txt 文件？

How can i stop the reloading of a .txt file with AJAX after loading it with setInterval?

ajax

clearinterval