Anzeige beim Verbindungsverlust funktioniert nicht immer [geschlossen] ⇐ JavaScript

[Anonymous]

In meiner PHP -App habe ich eine einfache Seite erstellt, die ein JS -Skript verwendet, um zu erkennen, wann die Verbindung verloren geht, und eine Nachricht entsprechend anzeigt: < /p>

Code: Select all

Test

Checking...





const internetStatus = document.getElementById('internetStatus');

function updateInternetStatus() {
if (navigator.onLine) {
console.log("online")
internetStatus.textContent = "online";
internetStatus.className = "status online";
} else {
console.log("offline")
internetStatus.textContent = "offline";
internetStatus.className = "status offline";
}
}

window.addEventListener('online', updateInternetStatus);
window.addEventListener('offline', updateInternetStatus);
updateInternetStatus();


< /code>
Es funktioniert wie ein Zauber.










const errorStatus = document.getElementById("errorStatus");

function updateInternetStatus() {
if (navigator.onLine) {
console.log("online")
errorStatus.textContent = "";
} else {
console.log("offline")
errorStatus.textContent = "Hors ligne - Pas de connexion Internet";
setTimeout(location.reload(), 5000);
}
}

window.addEventListener('online', updateInternetStatus);
window.addEventListener('offline', updateInternetStatus);
updateInternetStatus();

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function startslide() {
try {
fetch(jsvar + '.json')
.then(response => response.json())
.then(json => {
data = json
for (let i = 0; i < data.length; i++) {
const temps = data[i].duration * 1000;
async function displayData() {
await sleep(temps);
if (data[i].fin === "oui") {
i = 0;
location.reload();
}
const dataFunction = data[i].function;
const param = data[i].file;
getContent(dataFunction, param)
}
displayData();
}
})
} catch {
errorStatus.textContent = `Error while fetching file`;
console.error("Error while fetching file");
location.reload();
}
}

startslide();

Die Funktion getContent () ruft eine API auf und erstellen Sie eine andere DIV im Körper, um Daten zu injizieren. Dieser Teil funktioniert auch. < /P>
Jede Idee, warum, was in der ersten Datei funktioniert, funktioniert in der zweiten nicht? In beiden Fällen teste ich es sowohl in mutiger als auch in Firefox mit der Drosselungsfunktion.