Im using the Javascript to read data from digital sensor connected to Raspbery PI (In this case – Rotary Encoder, but it’s not that important. This it could be anyone another sensor or controller).
In Raspbery PI launched the bash script which write sensor value in “encoder.php” file every time when sensor value is changed.
This code working perfectly:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="coords"></div>
<script>
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();
</script>
Every time then i’m rotate encoder – i’m see the sensor value in “coords” div.
But when i modify this code to (this switching the tabs on page depending on encoder direction):
<script>
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();
</script>
Page normally functioning estimated 2-4 minutes, after this time switching between tabs doesn’t happen, as if the function is blocked or freeze. All other dynamic elements on page, continue to work. And page not reloading after pressing refresh or F5
The same if I try to open new tab and enter the page adress. Page not loaded until the tab with the non-working function is closed.