Как я могу остановить перезагрузку файла .txt с AJAX после загрузки его с помощью setInterval? - PullRequest
0 голосов
/ 11 февраля 2019

Я создаю систему чатов и использую технику AJAX для асинхронной загрузки плоского файла .txt.

Рядом с техникой AJAX, описанной выше, у меня также есть кнопка, которая позволяет вручную запускать иостановите перезагрузку плоского файла .txt.

Когда вы начинаете перезагрузку, он будет делать это каждую секунду / 1000 мс.

Пока все хорошо ... проблема возникает, когда я хочу очистить функцию setInterval с помощью функции clearInterval.Он работает только один раз, и после того, как я перезапустил загрузку документа снова с помощью кнопки «Пуск», я не могу остановить его повторную загрузку с помощью другой кнопки «Стоп».

Я перепробовал почти все решения на stackoverflowотносительно setInterval и clearInterval, но ни один из них, кажется, не обеспечивает решение, или некоторые потоки просто остаются открытыми без решения.Можно ли вообще остановиться и перезапустить?а затем остановитесь снова и т.д ..

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>

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Я нашел временное решение.Теперь я могу запустить и остановить перезагрузку документа ... но, когда я дважды нажимаю кнопку myStartFunction, я больше не могу остановить ее нажатием кнопки myStopFunction.

Итак, я решил 1проблема, хотя я не понимаю, что я сделал ... и создал еще одну.

Проблема, похоже, заключалась в ключевом слове "var". Я удалил "var" из переменной "reload".И я также добавил оператор return reload в блок кода myStartFunction.

Я не совсем понимаю, почему это работает, и я нахожу действительно странным, что мне пришлось сделать это таким образом.Но я нашел кое-что на другом сайте, где говорилось, что когда вы объявляете переменную без ключевого слова var в javascript, переменная становится глобальной переменной.Я подозревал, что это как-то связано с областями видимости или недоступной переменной, созданной setInterval.

Помните, что каждый вызываемый экземпляр функции 'setInterval' создает новый идентификатор, и нам нужен был способ доступа к вновь созданным идентификаторам 'setInterval' из каждого экземпляра, чтобы остановить его с помощью '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(); 
}
0 голосов
/ 11 февраля 2019

Ваша проблема здесь:

    var reload = setInterval(loadDoc,1000);


var myStartFunction = function () {

    var begin = setInterval(loadDoc,1000);

}

var myStopFunction = function() {

     var stop = clearInterval(reload);
}

Вы создаете интеграл через setInterval и сохраняете его в reload, который может быть корректно остановлен, но когда вы начнете снова через myStartFunction, высохраните его в локальной неиспользуемой переменной с именем begin, и при остановке вы намереваетесь остановить интервал с идентификатором 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
...