• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

chromo23

Neues Mitglied
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
 

Anhänge

  • html.zip
    3,8 KB · Aufrufe: 1

Sempervivum

Senior HTML'ler
Ich würde das mit setInterval machen, beim Klick den Timer mit clearInterval löschen und neu starten, dann vergehen nach dem Klick wieder 500 ms bis der Timer wieder feuert:
 

chromo23

Neues Mitglied
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.
 
Werbung:

Neueste Beiträge

Oben