Javascript автоматически обновить HTML, если кнопка нажата

Question

У меня есть следующий предмет:

<a class="btn btn-danger w-100" style='color: White' id='refresh_button' onclick="activateAutorefresh()"> ↺ </a>

Я хочу следующее: Если класс btn-danger, onClick измените его на btn-success и активируйте автообновление с тайм-аутом 5000 миллисекунд. Если нажать кнопку еще раз, измените класс на btn-danger и отключите автообновление.

Итак, у меня есть следующий код:

function activateAutorefresh(){
    if (document.getElementById("refresh_button").classList.contains('btn-danger')){
        document.getElementById("refresh_button").classList.remove('btn-danger');
        document.getElementById("refresh_button").classList.add('btn-success');
    }
    else {
        document.getElementById("refresh_button").classList.remove('btn-success');
        document.getElementById("refresh_button").classList.add('btn-danger');
    }
}

Я не знаю, как активировать / отключить автоматическое обновление страницы. Как я могу это сделать?

Также при обновлении сохраняйте текущее состояние автообновления.

Answer 1

Вы должны написать различные функции для автоматического обновления и включения / выключения таймера,

var arTimer;
function enableTimer() {
    arTimer = setTimeout(autoRefresh, 5000);
}

function disableTimer() {
    clearTimeout(arTimer);
}

function autoRefresh() {
    /* Code for auto refresh goes here */
}

вызовите enableTimer(), если вы хотите запустить таймер, и вызовите diableTimer(), если вы хотите очистить таймер до его истечения.

autoRefresh() функция должна содержать код для автоматического обновления.

Answer 2

Свойство DOM element.classList является ключом к этому, как вы использовали, но вам также необходимо использовать таймер для асинхронного подсчета и обновления страницы.

Теперь, когда страница обновится, все данные о предыдущей странице будут утеряны, поэтому вам нужно сохранить необходимые данные, а затем извлечь их обратно. Это можно сделать различными способами, но localStorage является самым простым.

ПРИМЕЧАНИЕ. Код не будет работать здесь в среде «Переполнение стека» из-за соображений безопасности, но будет работать при работе на веб-сервере.

// Place all of the following code in a <script> that is just before the closing body tag (</body>) 

// Get reference to element
var link = document.getElementById("refresh_button");

// Retrieve the last state of the link's classes from localStorage
link.className = localStorage.getItem("linkClassList");

// Set up the event handler
link.addEventListener("click", activateAutoRefresh);

let timer = null; // Will hold reference to timer

function activateAutoRefresh(evt){

  // Test to see if the clicked element has the "btn-danger" class
  if(this.classList.contains("btn-danger")){
    this.classList.remove("btn-danger");
    this.classList.add("btn-success");
    timer = setTimeout(function(){ location = location;}, 5000); // Refresh after 5 seconds
  } else {
    this.classList.remove("btn-success");
    this.classList.add("btn-danger"); 
    clearTimeout(timer);  // Cancel the timer
  }
}

// Set the link's class list into localStorage
link.className = localStorage.setItem("linkClassList", link.className);

<a class="btn btn-danger w-100" id='refresh_button' href="#"> ↺ </a>