Запрос JavaScript в бесконечной петле останавливается через несколько минут ⇐ Javascript

[Anonymous]

Я использую JavaScript для чтения данных из цифрового датчика, подключенного к Pi Raspbery (в данном случае - ротационный энкодер, но это не так важно. Это может быть любой другой датчик или контроллер).
в Raspbery Pi запустил. Скрипт Bash, который записывает значение датчика в файле «encoder.php» каждый раз, когда изменяется значение датчика.
Этот код работает отлично: < /p>




async function fetchData() {

let response = await fetch("encoder.php");

let text = await response.text();

return new Promise(resolve => {
setTimeout(() => resolve(text), 10);
});
}

async function myFunction() {

while (true) {
const data = await fetchData();
document.getElementById("coords").innerHTML = data;
}
}

myFunction();


< /code>
Каждый раз, тогда я вращаю Encoder - я вижу значение датчика в «координатах» div. < /p>
Но когда я изменяю этот код to (это переключение вкладок на странице в зависимости от направления кодера): < /p>

async function fetchData() {
let response = await fetch("php/encoder.php");

let text = await response.text();

return new Promise(resolve => {
setTimeout(() => resolve(text), 10);
});
}

async function myFunction() {

while (true) {
const data = await fetchData();
resp = data;
var readState = resp.substr(0,5);
var direction = resp.substr(6);
if (typeof lastState == 'undefined') {lastState = ""};
// console.log(direction);
// console.log(readState);
// console.log(lastState);
if (lastState != readState && lastState != "")
{//console.log(direction)

var test = document.getElementsByClassName("active")[0];
// console.log(test);
test2=test.innerHTML;
// console.log(test2);
var mySubString = test2.substr(10,6);
// console.log(mySubString);

if (mySubString == "ST_NAV" && direction == "CCW")
{

document.getElementById("ST_SCREEN").classList.remove('active');
document.getElementById("SE_SCREEN").classList.add('active');
document.getElementById("ST_nav_el").classList.remove('active');
document.getElementById("SE_nav_el").classList.add('active');
document.getElementById("ST_NAV").classList.remove('active');
document.getElementById("SE_NAV").classList.add('active');

};

if (mySubString == "ST_NAV" && direction == "CW")
{

document.getElementById("ST_SCREEN").classList.remove('active');
document.getElementById("MA_SCREEN").classList.add('active');
document.getElementById("ST_nav_el").classList.remove('active');
document.getElementById("MA_nav_el").classList.add('active');
document.getElementById("ST_NAV").classList.remove('active');
document.getElementById("MA_NAV").classList.add('active');
ShowMap();

};

if (mySubString == "SE_NAV" && direction == "CW")
{

document.getElementById("SE_SCREEN").classList.remove('active');
document.getElementById("ST_SCREEN").classList.add('active');
document.getElementById("SE_nav_el").classList.remove('active');
document.getElementById("ST_nav_el").classList.add('active');
document.getElementById("SE_NAV").classList.remove('active');
document.getElementById("ST_NAV").classList.add('active');

};

if (mySubString == "MA_NAV" && direction == "CW")
{

document.getElementById("DA_SCREEN").classList.add('active');
document.getElementById("MA_SCREEN").classList.remove('active');
document.getElementById("DA_nav_el").classList.add('active');
document.getElementById("MA_nav_el").classList.remove('active');
document.getElementById("DA_NAV").classList.add('active');
document.getElementById("MA_NAV").classList.remove('active');

};

if (mySubString == "MA_NAV" && direction == "CCW")
{

document.getElementById("ST_SCREEN").classList.add('active');
document.getElementById("MA_SCREEN").classList.remove('active');
document.getElementById("ST_nav_el").classList.add('active');
document.getElementById("MA_nav_el").classList.remove('active');
document.getElementById("ST_NAV").classList.add('active');
document.getElementById("MA_NAV").classList.remove('active');

};

if (mySubString == "DA_NAV" && direction == "CCW")
{

document.getElementById("DA_SCREEN").classList.remove('active');
document.getElementById("MA_SCREEN").classList.add('active');
document.getElementById("DA_nav_el").classList.remove('active');
document.getElementById("MA_nav_el").classList.add('active');
document.getElementById("DA_NAV").classList.remove('active');
document.getElementById("MA_NAV").classList.add('active');

};

if (mySubString == "DA_NAV" && direction == "CW")
{
document.getElementById("DA_SCREEN").classList.remove('active');
document.getElementById("RA_SCREEN").classList.add('active');
document.getElementById("DA_nav_el").classList.remove('active');
document.getElementById("RA_nav_el").classList.add('active');
document.getElementById("DA_NAV").classList.remove('active');
document.getElementById("RA_NAV").classList.add('active');
};

if (mySubString == "RA_NAV" && direction == "CCW")
{
document.getElementById("DA_SCREEN").classList.add('active');
document.getElementById("RA_SCREEN").classList.remove('active');
document.getElementById("DA_nav_el").classList.add('active');
document.getElementById("RA_nav_el").classList.remove('active');
document.getElementById("DA_NAV").classList.add('active');
document.getElementById("RA_NAV").classList.remove('active');
};
};
lastState = readState;
}
}

myFunction();



< /code>
Страница, обычно функционирующая, оценивается 2-4 минуты, после этого времени переключения между вкладками не происходит, как если бы функция заблокирована или замораживается. Все остальные динамические элементы на странице продолжают работать. И страница не перезагружая после нажатия обновления или f5
то же самое, если я попытаюсь открыть новую вкладку и ввести вкладку страницы. Страница не загружена до тех пор, пока вкладка с неработающей функцией не будет закрыта.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ew-minutes