[GELOEST] async function mehrmals aufrufen bzw timer neu setzen...

chromo23 · 17 Januar 2022

Ich habe noch ein Problem an einer anderen Stelle.
Ich habe eine async Funktion die alle 5 Sekunden aufgerufen wird um aktuelle Daten zu holen:

Javascript:

<body onload="fetchJson()">

    <script>
        window.isittime = 1;
        const blackList = []; //Blacklist Devices e.g. ["Display", "Sensor"]
        async function fetchJson() {
            .
            .
            .
            .
            setTimeout(fetchJson, 5000);  //how often fetch the data in ms
            sliderStart()  // right now the only place to call the function so that the slidervalue responds immediately
        }
    </script>

Ich lasse über diese Funktion Tiles generieren. Hier ein paar Bilder: https://www.html.de/threads/uebersicht-aus-json-generieren.60684/#post-407689
Dies Tiles fungieren gleichzeitig als Button:

Javascript:

    utton = sensor.TaskName;
    sliderValue = item.Value;
    if ((sensor.TaskName).toLowerCase().includes("btn") || (sensor.TaskName).toLowerCase().includes("button") &&
        (item.Name).toLowerCase().includes("state")) { //if a task contains "button" or "btn" and has a taskvalue called "State"it generates an onclick event
        if (item.Value === 1) {
            html += '<div id="clickables" class="on sensorset" onclick="buttonClick(\'' + utton + '\',)">' + '<div class="sensors"style = "font-weight:bold;font-size: 14pt;" > ' + sensor.TaskName + '</div > ';
        }else {
            html += '<div id="clickables" class="sensorset" onclick="buttonClick(\'' + utton + '\')">' + '<div class="sensors"style = "font-weight:bold;font-size: 14pt;" > ' + sensor.TaskName + '</div > ';
        }
    }

Ihre Rückmeldung welchen Status (1 oder 0) sie haben bekommen sie auch über diese async Funktion indem sie eine andere Klasse (on) zugeordnet bekommen.
Damit diese Rückmeldung möglichst schnell passiert, worst case ist ja, dass die async function erst wieder in 5 Sekunden ausgeführt wird, rufe ich schlechterweise die function durch onclick gleich nochmal auf (habe ich auch am ende des codes kommentiert :) ):

Javascript:

<script>
    function buttonClick(utton) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            }
        }
        xhr.open('get', 'control?cmd=event,' + utton + 'event', true); //generating the event for all the buttons
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
        window.clearTimeout(myTimeout);
        setTimeout(fetchJson, 500);//bad try of refreshing the values immediately (works but is a mess because it´s piling up the setTimeouts)
    }
</script>

Wie macht man das richtig? ich habe mit clearTimer experimentiert aber das funktioniert irgendwie nicht richtig.
So sollte es sein: Nach einem Klick auf einen Button warte 500ms und rufe dann den Status des Buttons ab. Ich könnte den weg über noch eine Funktion gehen, aber irgendwie wird das dann auch alles zu lang...

Im Anhang auch hier nochmal der Code komplett

chromo23 · 18 Januar 2022

Danke für deine Hilfe. Ich habe das jetzt so gelöst:

CSS:

<script>

var firstRun = true;
async function myFunction() {
  if (firstRun) {
  setInterval(myTimer, 10000);
   firstRun = false;
   }
  //do your stuff
}

function myButton() {
setTimeout(myTimer, 500);
}
</script>

Funktion myFunction wird gestartet, beim ersten Mal ein Intervall gestartet, dass die Funktion alle 10sek startet.
Wen ein Button gedrückt wird, startet die Funktion myFunction nach 500ms unabhängig vom 10sek Intervall einmalig.

[GELOEST] async function mehrmals aufrufen bzw timer neu setzen...

chromo23

Neues Mitglied

Anhänge

chromo23

Neues Mitglied

Neueste Beiträge