Calling a page update function

Question

I have the following HTML that calls a Javascript function:

 <div>
  <button id="avancar-aula">Avançar aula</button> 
 </div>

 <script src="js/avanca-aula.js"></script>

And I have the JS function:

let avancarAula = document.querySelector('#avancar-aula');
avancarAula.addEventListener('click', function(evento){

 avancaAula();
});

function avancaAula(){


      let avanca = {

        idUsuario: document.querySelector('#id').textContent,
        token: document.querySelector('#token').textContent,
        id: document.querySelector('#ultima-aula').textContent
      };

      var xhr = new XMLHttpRequest();
      var variavel = document.querySelector('#token-servico').innerHTML;

      xhr.open("POST", "http://54.233.9.248:8080/web/rest/classes/nexts", 
true);
      xhr.setRequestHeader("Content-type", "application/json");
      xhr.setRequestHeader("Authorization", "Bearer " + variavel);
      xhr.addEventListener("load", function(){

      if(xhr.status == 200){

       console.log(xhr.responseText);
     }

     if(xhr.status =500){
       console.log(xhr.responseText);
    }
   });
  xhr.send(JSON.stringify(avanca));
 }
setTimeout(avancaAula, 3000);

My problem is this.

Every time I give an F5 it calls the function, like it clicks the button alone. I made it so that when I want to change page I click on the button to call the action, but I can’t imagine what is happening for this function to be called at the moment the page is updated. What can it be?

Answer 1

[...]but I can’t imagine what’s going on for this function to be called on time when the page is updated. What can be?

The setTimeout(avancaAula, 3000); will call the function after 3 seconds when the page is loaded.

If you do not want this to happen, simply delete this line from SetTimeout.