Why arent the functions activating in order?

Question

The functions are all activating in a random order and I have no idea why

I have tried re-ordering them and placing them in different functions.For some reason setting alert works and keeps them in order but that is not the outcome I desire.Most of the code there is just console.logs and me assigning them to local storage. I apologize for the extremely long code

function ironman() {
  var XHR = new XMLHttpRequest();
  XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
      var info = JSON.parse(XHR.responseText)
      console.log(info.Title)

      var box = info.BoxOffice
      boxnum = box.replace("$", "")
      boxnum1 = boxnum.replace(",", "")
      box = parseInt(boxnum1.replace(",", ""))
      console.log(box)

      var IM = info.Ratings[0].Value
      var IM1 = IM.replace("/10", "")
      IM = parseInt(IM1)
      console.log(IM)
      var RT = info.Ratings[1].Value
      var RT1 = RT.replace("%", "")
      RT = parseInt(RT1)
      console.log(RT)
      var Meta = info.Ratings[2].Value
      var Meta1 = Meta.replace("/100", "")
      Meta = parseInt(Meta1)
      console.log(Meta)

      var ti = info.Title

      boxoffice.push(box)
      boxoffice1.push(box)
      title.push(ti)
      title1.push(ti)
      imbd.push(IM)
      imbd1.push(IM)
      rottentomatoes.push(RT)
      rottentomatoes1.push(RT)
      metacritic.push(Meta)
      metacritic1.push(Meta)
      console.log()

      localStorage.setItem("boxoffice", JSON.stringify(boxoffice))
      localStorage.setItem("boxoffice1", JSON.stringify(boxoffice1))

      localStorage.setItem("title", JSON.stringify(title))
      localStorage.setItem("title1", JSON.stringify(title1))

      localStorage.setItem("imbd", JSON.stringify(imbd))
      localStorage.setItem("imbd1", JSON.stringify(imbd1))

      localStorage.setItem("rottentomatoes", JSON.stringify(rottentomatoes))
      localStorage.setItem("rottentomatoes1", JSON.stringify(rottentomatoes1))

      localStorage.setItem("metacritic", JSON.stringify(metacritic))
      localStorage.setItem("metacritic1", JSON.stringify(metacritic1))
    }
  };
  XHR.open("GET", "http://www.omdbapi.com/?t=Iron Man&apikey=???????");
  XHR.send()
}

function hulk() {
  var XHR = new XMLHttpRequest();
  XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
      var info = JSON.parse(XHR.responseText)
      console.log(info.Title)

      var box = info.BoxOffice
      boxnum = box.replace("$", "")
      boxnum1 = boxnum.replace(",", "")
      box = parseInt(boxnum1.replace(",", ""))
      console.log(box)

      var IM = info.Ratings[0].Value
      var IM1 = IM.replace("/10", "")
      IM = parseInt(IM1)
      console.log(IM)
      var RT = info.Ratings[1].Value
      var RT1 = RT.replace("%", "")
      RT = parseInt(RT1)
      console.log(RT)
      var Meta = info.Ratings[2].Value
      var Meta1 = Meta.replace("/100", "")
      Meta = parseInt(Meta1)
      console.log(Meta)

      var ti = info.Title

      boxoffice.push(box)
      boxoffice1.push(box)
      title.push(ti)
      title1.push(ti)
      imbd.push(IM)
      imbd1.push(IM)
      console.log(imbd1)
      rottentomatoes.push(RT)
      rottentomatoes1.push(RT)
      metacritic.push(Meta)
      metacritic1.push(Meta)
      console.log()

      localStorage.setItem("boxoffice", JSON.stringify(boxoffice))
      localStorage.setItem("boxoffice1", JSON.stringify(boxoffice1))

      localStorage.setItem("title", JSON.stringify(title))
      localStorage.setItem("title1", JSON.stringify(title1))

      localStorage.setItem("imbd", JSON.stringify(imbd))
      localStorage.setItem("imbd1", JSON.stringify(imbd1))

      localStorage.setItem("rottentomatoes", JSON.stringify(rottentomatoes))
      localStorage.setItem("rottentomatoes1", JSON.stringify(rottentomatoes1))

      localStorage.setItem("metacritic", JSON.stringify(metacritic))
      localStorage.setItem("metacritic1", JSON.stringify(metacritic1))
    }
  };
  XHR.open("GET", "http://www.omdbapi.com/?t=The Incredible Hulk&apikey=???????");
  XHR.send()
}

function thor() {
  var XHR = new XMLHttpRequest();
  XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
      var info = JSON.parse(XHR.responseText)
      console.log(info.Title)

      var box = info.BoxOffice
      boxnum = box.replace("$", "")
      boxnum1 = boxnum.replace(",", "")
      box = parseInt(boxnum1.replace(",", ""))
      console.log(box)

      var IM = info.Ratings[0].Value
      var IM1 = IM.replace("/10", "")
      IM = parseInt(IM1)
      console.log(IM)
      var RT = info.Ratings[1].Value
      var RT1 = RT.replace("%", "")
      RT = parseInt(RT1)
      console.log(RT)
      var Meta = info.Ratings[2].Value
      var Meta1 = Meta.replace("/100", "")
      Meta = parseInt(Meta1)
      console.log(Meta)

      var ti = info.Title

      boxoffice.push(box)
      boxoffice1.push(box)
      title.push(ti)
      title1.push(ti)
      imbd.push(IM)
      imbd1.push(IM)
      console.log(imbd1)
      rottentomatoes.push(RT)
      rottentomatoes1.push(RT)
      metacritic.push(Meta)
      metacritic1.push(Meta)
      console.log()

      localStorage.setItem("boxoffice", JSON.stringify(boxoffice))
      localStorage.setItem("boxoffice1", JSON.stringify(boxoffice1))

      localStorage.setItem("title", JSON.stringify(title))
      localStorage.setItem("title1", JSON.stringify(title1))

      localStorage.setItem("imbd", JSON.stringify(imbd))
      localStorage.setItem("imbd1", JSON.stringify(imbd1))

      localStorage.setItem("rottentomatoes", JSON.stringify(rottentomatoes))
      localStorage.setItem("rottentomatoes1", JSON.stringify(rottentomatoes1))

      localStorage.setItem("metacritic", JSON.stringify(metacritic))
      localStorage.setItem("metacritic1", JSON.stringify(metacritic1))
    }
  };
  XHR.open("GET", "http://www.omdbapi.com/?t=Thor&apikey=???????");
  XHR.send()
}

ironman()
hulk()
thor()

Aside from the answer to your question, which can be found in the duplicate I've marked, you can massively reduce this code by using functions with arguments. Research the DRY principle — Rory McCrossan, Jun 02 '19 at 16:22

score 0 · Answer 1 · answered Jun 02 '19 at 16:08

0

I think Ajax requests are sending in order, but their responses are returning asynchronously. So it depends on server response time of each request that which one returns response earlier.

answered Jun 02 '19 at 16:08

Forough

262
4
20

ye I was thinking abt that too,is there anyway to make sure all the responses return in order? – gaBe ng Jun 02 '19 at 16:11
It is not an interesting way, but you can call each next function in the response function of its last function, like a chain. – Forough Jun 02 '19 at 16:18

Why arent the functions activating in order?

1 Answers1