Как можно выполнить рендер элементов синхронно, без использования setTimeout, в модуле orderDataFreightsAndCabins.js?

Question

Andy Koshman @Chupachar

front-end dev

JavaScript

Как можно выполнить рендер элементов синхронно, без использования setTimeout, в модуле orderDataFreightsAndCabins.js?

Всем привет, не получается разобраться в том, как найти узел const textAdultSixteens =
document.querySelector(".age-adultSixteen") без использования setTimeout. У меня есть 2 связанных друг с другом модуля (запрос на получение кают, запрос на получение счетчиков) за счет callback функции cabinCart(). В cabinCart() я получаю счетчики с сервера, функция которых выглядит вот так cabinCartCounter(). В loadFreightsAndCabins(cabinCart)я получаю список кают в которых рендерятся счетчики таким образом:

модуль cabinCart.js
function cabinCart() {
   cabinCartCounter()     //3 вызываю функцию счетчиков в которой они рендерятся
}
fetchFreightsAndCabins(cabinCart)

модуль orderDataFreightsAndCabins.js
function loadFreightsAndCabins(cabinCart) {
  cabins.insertAdjacentHTML("beforebegin", result["html"]);    //1 рендерю кают
  cabinCart()      //2 рендерю функцию в которой вызывается функция счетчиков
}

То есть я сначала получаю список кают и после запускаю cabinCart в функцию в которой уже запрашиваю счетчики и рендерю их в каютах. Всё работает, но если я хочу поменять текст у счетчиков при смене языка (ну или прост при перезагрузке страницы), вот здесь:

function loadFreightsAndCabins(cabinCart) {
  cabins.insertAdjacentHTML("beforebegin", result["html"]);     
  cabinCart()      
 //узел счетчика я уже не увижу
   const textAdultSixteens =
          document.querySelector(".age-adultSixteen") === null
}

но если оберну

setTimeout(() => {const textAdultSixteens =
          document.querySelector(".age-adultSixteen")}, 500) === <div>счетчик</div>

то получу узел счетчика.

Нужно понять как найти узел

const textAdultSixteens =
          document.querySelector(".age-adultSixteen")

без использования setTimeout, надеюсь что я приблизительно понятно объяснил как работает код и что нужно сделать.

Более подробный код:

spoiler

модуль orderDataFreightsAndCabins.js
export function loadFreightsAndCabins(cabinCart) {
  const renderResult = (result) => {
    if (result.result === 0) {
      alert(result.message);
    } else {
      cabins.insertAdjacentHTML("beforebegin", result["html"]); //получаю разметку страницы с backend
      
      cabinCart(); // в данной функции рендерятся счетчики

      setTimeout(() => { //текст счетчиков рендерится после 
        const textAdultSixteens =
          document.querySelector(".age-adultSixteen");

        if (cartAdultSixteen && textAdultSixteens) {
          cartAdultSixteen.innerHTML =
            textAdultSixteens.innerHTML + ":&nbsp"; //при смене языка меняю текст (присваиваю старому тексту новый из result["html"])
        }

      }, 2000);
    }
  });
}
}
]

модуль cabinCart.js
export function cabinCart() {
  import cabinCartCounter from "....js";
  import {
    loadFreightsAndCabins as fetchFreightsAndCabins
  } from "...js";
  cabinCartCounter(); //рендер счетчиков в карточке
}
fetchFreightsAndCabins(cabinCart); //запускаю cabinCart функцию как callback функцию после