Change the outerHeight of the #new-quote element after the getQuote() function was finished

Question

I was trying to use a jQuery callback argument in the getQuote() function but it doesn't seem to work. Let me explain everything.

See the Pen rpjXbO by Lukas (@Kestis500) on CodePen.

---

Here is a small snippet of the getQuote() function:

var getQuote = function(callback) {
  $.ajaxSetup({ cache: false });
  $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      var quoteText = e[0].content,
          quoteAuthor = e[0].title;

      $(".quote-text").html(
        '<i class="fa fa-quote-left" aria-hidden="true"></i>' + quoteText
      );
      $(".quote-author").html("- " + quoteAuthor);

      $("#tweet-quote").attr(
        "href",
        "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" +
           encodeURIComponent('"' + quoteText + '" ' + quoteAuthor));

      $("#tumblr-quote").attr(
        "href",
        "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,
          freecodecamp&caption=" +
          encodeURIComponent(quoteAuthor) +
          "&content=" +
          encodeURIComponent(quoteText) +
          "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=
          tumblr_share_button"
      );
    }
  );

  //setTimeout(function(){ callback(); }, 2000);
    callback();
};

As written here: https://stackoverflow.com/a/19674400, I used a callback as a getQuote() function argument but it doesn't change the #new-quote outerHeight, which should be equal to the .quote-container outerHeight:

getQuote(function() {
  $("#new-quote").outerHeight($(".quote-container").outerHeight());
});

This is a photo showing what's happening when I run this code:

As you can see, 1 element's outerHeight isn't equal to the 2 element's outerHeight.

---

Now, If I change only one little detail in the getQuote() function:

Before:

//setTimeout(function(){ callback(); }, 2000);
callback();

After:

setTimeout(function(){ callback(); }, 2000);
//callback();

Yes, both elements' outerHeight is perfectly equal.

---

The problem is, I don't want to use setTimeout() function because in some cases (for example slow internet connection) page's load speed can take up to 2 seconds (as stated in this function), so I'd like to remove this line of code and use only callback();.

However, it doesn't work. What should I change so the #new-quote outerHeight is changed exactly after getQuote() function?

Using console.log() function instead of outerHeight() worked.

When the getQuote() function is finished, it should change the outerHeight of the .quote-container element but it changes only after about 1 second (if the internet connection is fast) and because of setTimeout(), it changes only after 2 seconds, regardless of the internet speed, so if the connection is slow, #new-quote outerHeight won't change (for example if the connection is very slow because it won't load in 2 seconds for sure).

Answer 1

The calback needs to be called inside the $.getJSON callback

Here is an updated pen: https://codepen.io/anon/pen/Rxpbwy

and here is the gist of the change:

The callback does not wait for the ajax getJSON to finish, it runs before that. You will have to move your callback() inside the success callback of the getJSON

before

 $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      ...
    }
  );
  callback(); // the request may or may not be done, but most likely not.

after

 $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      ...
      callback(); // the request is done and successful
    }
  );