Javascript: Wiederholt automatisch aktualisieren Webseite mit einem ON-OFF-Tasten

Question

Ich möchte Javascript verwenden, um meine Webseite automatisch zu aktualisieren, während Benutzer die automatische Aktualisierung mit zwei verschiedenen Tasten aktivieren/deaktivieren können (Bitte beachten Sie dass die Tasten <label> und <input> Tag verwenden). Ich habe mein Bestes versucht, um den Code zu schreiben, aber ich weiß immer noch nicht, wie ich diese beiden Codes verknüpfen soll, damit sie richtig funktionieren kann.

Wenn der Benutzer die Schaltflächen für die automatische Aktualisierung aktiviert hat, möchte ich die automatische Aktualisierung nach dem ersten Laden fortführen, anstatt nur einmal automatisch zu aktualisieren.

Würden Sie mir bitte helfen, meine Codes zu korrigieren? Vielen Dank.

Der Code für ON und OFF-Tasten (zwei einzelne Tasten):

<div class="page-header-actions" data-toggle="buttons" role="group"> 
    <label class="btn btn-outline btn-primary active"> 
    <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked /> 
    <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF 
    </label> 
    <label onClick="startrefreshon" class="btn btn-outline btn-primary"> 
    <input type="radio" autocomplete="off" value="autorefreshon" /> 
    <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON 
    </label> 
</div> 

Der Code für Auto-Refresh-Funktion:

<script type='text/javascript'> 
setTimeout(function(){ 
    window.location.reload(1); 
}, 5000); 
</script> 

Answer 1

Hier sind ein paar Dinge, die Sie tun müssen:

1. Sowohl die input type="radio" sollte die gleiche name haben.
2. Geben Sie der Schaltfläche "auto refresh on" eine ID, damit Sie sie einfach in JavaScript-Code (z. B. auto-refresh-checkbox) referenzieren können.
3. Schreibe eine Reload-Funktion, die das Kontrollkästchen überprüft, ob checked

Code ist:

function reloadPage(){ 
    var refreshEnabled = document.getElementById('auto-refresh-checkbox'); 
    if(refreshEnabled.checked) { 
    window.location.reload(1); 
    } 
} 

4. Dann ist diese Funktion

über setInterval nennen setInterval(reloadPage, 5000);

---

PS: Das überprüfte "Auto Refresh" Radio verliert seinen Wert beim erneuten Laden der Seite, daher müssen Sie den Wert möglicherweise mit localStorage oder etwas anderem speichern.