Calling a function to refresh the page only

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 as follows.

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