JavaScript Start/Stopp

International Deutsch
1

Hallo,

ich benutze folgendes JavaScript um von einer Funktion (im ESP32) Daten zu empfangen und anzuzeigen:

 <script type="text/javascript">
function renew() {
           fetch('/test').then(function (response) {
             return response.text();
           }).then(function (text) {
           console.log("Text" + text);
           if (text != "FileNotFound") {
             document.querySelector('#rest').innerHTML = 'Rest Time: '+ text + ' Sekunden';} else {
document.querySelector('#rest').innerHTML = 'Rest Time: 0 Sekunden';
}
           });
         }
         document.addEventListener('DOMContentLoaded', renew);
         setInterval(renew, 1000);

</script>

Durch die letzten beiden Befehle wird die Funktion automatisch alle 1 Sekunden aufgerufen, auch wenn keine Daten gesendet werden.
Wie könnte ich die JavaScript Funktion nur aktivieren wenn Daten gesendet werden ?
Die Daten werden alle 1 Sekunden gesendet (ausgelöst durch einen "Button START").

MfG

Juergen B.

2

Dann lass die beiden Zeilen weg und schreibe in die Button-Zeile des Start-Buttons

onclick="renew();"

Gruß Tommy

3

Hallo,

danke für die schnelle Antwort, aber:
Mit "onclick="renew();" kann ich die Funktion starten und die Daten empfangen, aber wie kann ich dann die Funktion stoppen wenn keine Daten (Zeit abgelaufen) mehr gesendet werden ?

MfG

Juergen B.

4

Was verstehst Du darunter? Wer sendet denn welche Daten und dann nicht mehr?

In dem JS werden keine Daten gesendet, also kann es wohl nur der ESP sein.
Wie soll aber das JS im Browser wissen, ob der Daten hat oder nicht?
Das musst Du ihm schon mitteilen.

Der Browser kann immer nur abfragen und Dir sagen, ob Daten da sind (welche) oder nicht.

Gruß Tommy

5 
 <script type="text/javascript">
function renew() {
           fetch('/test').then(function (response) {
             return response.text();
           }).then(function (text) {
           console.log("Text" + text);
           if (text == "00:00") {
             window.clearInterval(intervalId);
           }
           if (text != "FileNotFound") {
             document.querySelector('#rest').innerHTML = 'Rest Time: '+ text + ' Sekunden';} else {
document.querySelector('#rest').innerHTML = 'Rest Time: 0 Sekunden';
}
           });
         }
         document.addEventListener('DOMContentLoaded', renew);
         intervalId = window.setInterval(renew, 1000);

</script>

ungetestet

text == "00:00" // Zeile anpassen

Gruß Fips

6

Hallo,

danke Fips für Deinen Programm-Code.
So ähnlich hatte ich das auch schon versucht (mit einer Variablen "start_stopp".
Die Variable "start_stopp" wird bei mir in der Funktion Eingabe Zeit (ausgelöst durch den Button "START" auf "1" gesetzt und sollte in der Funktion renew auf "0" gesetzte werden.
Damit wollte ich den Intervall für die Funktion renew steuern.
Aber der Code:

 if (text =="0") {
        start_stopp = 0;
}
bzw.
 if (text =="0") {
       window.clearInterval(intervalId);
 }

funktioniert nicht : text == "0" wird nicht erkannt, obwohl folgendes gesendet wird:
9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, usw. solange die Funktion renew aktiv ist.

MfG

Juergen B.

7

jbaben:
if (text =="0") {
window.clearInterval(intervalId);
}

funktioniert nicht : text == "0" wird nicht erkannt, obwohl folgendes gesendet wird:
9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, usw. solange die Funktion renew aktiv ist.

Lass dir anzeigen was empfangen wird.
Browser -> F12

console.log(text);
 if (text =="0") {
       window.clearInterval(intervalId);
 }

Gruß Fips

8

Hallo,
das hatte ich auch schon gemacht.
Angezeigt wird: "0".
Ich verstehe das nicht, kann ich mir nicht erklären.
Kann es sein das wirklich "0" gesendet wird, wie müsste dann die Abfrage lauten ?

if (text == ""0"") ????

MfG

Juergen B.

9

jbaben:
Kann es sein das wirklich "0" gesendet wird, wie müsste dann die Abfrage lauten ?

JA

if (text == '"0"')

' "0" '

Gruß Fips

10

Hallo,

mit:

if ( text == '"0"')

wird nun die gesendete "0" erkannt.
Jetzt muss ich noch heraus finden wie ich damit die Funktion renew Start/Stoppen kann.
So zum Beispiel ?

if (start_stopp == 1) {
   document.addEventListener('DOMContentLoaded', renew);
   intervalId = window.setInterval(renew, 1000);
}

MfG

Juergen B.
11

Hattest Du oben nicht geschrieben, dass Du die Übertragung nur auf Klick auf den Start-Button durchführen willst oder hatte ich das falsch verstanden?

Gruß Tommy

12

jbaben:
Jetzt muss ich noch heraus finden wie ich damit die Funktion renew Start/Stoppen kann.

document.addEventListener('DOMContentLoaded', renew);
Führt die Funktion einmal aus.

var interval_4 = window.setInterval(renew, 1000);
Startet den Intervall

window.clearInterval(interval_4);
Beendet den Interval

Gruß Fips

13

Hallo,

es funktioniert nun, vielen Dank für Eure Hilfe.
Hier der entsprechende Programm-Code:

HTML
<button type="submit" class="button_on" id="led4" onclick="start_renew()">START</button> 
<div id ='rest'>Rest Time: 0 Sekunden</div>

JavaScript
function start_renew() {
	document.addEventListener('DOMContentLoaded', renew);
 	intervalId = window.setInterval(renew, 1000);
} 

function renew() {
           fetch('/test').then(function (response) {
             return response.text();
           }).then(function (text) {
           console.log("Text: " + text);
           
           if (text == '"0"') {
           	window.clearInterval(intervalId);
           	text = "0";
           }
           if (text != "FileNotFound") {
             document.querySelector('#rest').innerHTML = 'Rest Time: '+ text + ' Sekunden';} else {
document.querySelector('#rest').innerHTML = 'Rest Time: 0 Sekunden';
}

ESP32 (Auszug)
aus = millis() + switch_on_time*60000;  // switch_on_time = 1-30 Minuten
rest_time = (aus - millis())/1000;
zeit[l] = (aus - millis())/1000;
l = 1;
if ( zeit[0] != rest_time ) {      // Wert nur senden wenn Änderung
        l = 0;
        server.on("/test", []() {
          server.send(200, "text/plain","\"" + (String)rest_time + "\"");
        });
}

Die Funktion "renew" wird mit dem Button START gestartet und die Restzeit wird angezeigt. Mit der Restzeit "0" wird die Funktion "renew" gestoppt.

MfG

Juergen B.