Run code after first lines

Question

Good afternoon, you guys! I’m trying to solve a little bug here from a scritp I made for a site, I’m beginner yet and I’m not able to solve.

What happens is: I need the code to run only after this line because there is no time for the elements to run

$( "#filtro-belem" ).load( "http://recursos.belempneusb2b.ecommercestore.com.br/c/filtro.html" );

$( "#filtro-belem" ).load( "http://recursos.belempneusb2b.ecommercestore.com.br/c/filtro.html" );

(function() {
const category = document.getElementById("category")
const width = document.getElementById("width")
const profile = document.getElementById("profile")
const wheel = document.getElementById("wheel")

const nextTypes = {
  category: width,
  width: profile,
  profile: wheel
}

function handleFilterType(type) {
    return () => {
        const { id, value } = type
        const currentOption = type.querySelector(`option[value='${value}']`).innerText

        const nextType = nextTypes[id]
        const options = nextType.querySelectorAll("option")

        options.forEach((option) => {
          if (!option.dataset || !option.dataset.relation) return null
          const acceptedTypes = option.dataset.relation.split("-")

          option.hidden = !acceptedTypes.includes(currentOption)
        })
    }
}

category.addEventListener("change", handleFilterType(category))
width.addEventListener("change", handleFilterType(width))
profile.addEventListener("change", handleFilterType(profile))
})();

Answer 1

That method .load() accepts a function as the second or third argument that will use as callback when the .load ran.

So instead of using that IIFE you can put that code inside that callback:

$("#filtro-belem").load("http://recursos.belempneusb2b.ecommercestore.com.br/c/filtro.html", function() {
  const category = document.getElementById("category")
  const width = document.getElementById("width")
  const profile = document.getElementById("profile")
  const wheel = document.getElementById("wheel")

  const nextTypes = {
    category: width,
    width: profile,
    profile: wheel
  }

  function handleFilterType(type) {
    return () => {
      const {
        id,
        value
      } = type
      const currentOption = type.querySelector(`option[value='${value}']`).innerText

      const nextType = nextTypes[id]
      const options = nextType.querySelectorAll("option")

      options.forEach((option) => {
        if (!option.dataset || !option.dataset.relation) return null
        const acceptedTypes = option.dataset.relation.split("-")

        option.hidden = !acceptedTypes.includes(currentOption)
      })
    }
  }

  category.addEventListener("change", handleFilterType(category))
  width.addEventListener("change", handleFilterType(width))
  profile.addEventListener("change", handleFilterType(profile))
});