Как последовательно вызвать функции?

Question

[KeeVeeG]

Имеется функция, которая срабатывает при отправки формы. Внутри нее находятся 2 функции. Первая - просто делает innerHTML. Вторая - отправляет запрос на сервер, после получения данных из запроса делает тоже innerHTML, но уже с другим текстом. Тут возникла проблема, почему то обе подфункции срабатывают уже после получения ответа от сервера и innerHTML срабатывает только от второй подфунции. Мне надо, чтобы они срабатывали последовательно, как это реализовать? Код прикладываю ниже

$('#searchform').submit(function(){
  loading();
  updatelist();
  });
  function loading(){
  document.getElementById('snuslist').innerHTML = `<div class="col-sm-12 d-flex justify-content-center"><div class="spinner-border" style="width: 5rem; height: 5rem; margin-top: 13rem !important; " role="status"></div></div>`;
  }
  function updatelist(){
  var url = 'getsnuslist.php?search='+document.getElementById('searchtext').value;
  var xhr = new XMLHttpRequest();
  xhr.open('GET',url,false);
  xhr.send();
  document.getElementById('snuslist').innerHTML = xhr.responseText;
  }

Comments

[Александр Черемхин]

Ajax запрос является асинхронным. Вы этот факт в своём коде полностью проигнорировали.

после получения данных из запроса делает тоже replaceWith, но уже с другим текстом

Этого в коде нет.

Вы что хотите в результате получить ?

Answer 1

[Александр Черемхин]

Ответить на ваш вопрос трудно, так как он немного мутно сформулирован. Из кода видно что Вы используете jquery поэтому покажу общий подход с использование библиотеки.

$('#searchform').submit(function(е){
   e.preventDefault(); //  это предотвратит отправку формы 

   // здесь код который выполнится до отправки запроса к серверу

   $.get(url)  // запрос  к серверу
       .then(data=>{
             // здесь код который выполнится после успешного ответа сервера
       }
       .catch(err=>{
              // здесь код если произошла ошибка
       })

Comments

[KeeVeeG]

Спасибо, прямо то что нужно, все работает