Random Quote Machine - API cache causing quote to not update properly

Random Quote Machine - API cache causing quote to not update properly
0.0 0

#1

I’m not sure what is happening with my CodePen, as it has some (in my mind) very unusual symptoms, which, after significant time spent debugging, leads me to hypothesis that the browser has some order of operation to carrying out my jQuery to which I do not fully understand and do not no any resources to learn.

For reference, my CodePen is here:

Specifically, the symptoms are:

  1. My API only pulls a unique random quote when I change a character in the URL in my .getJSON function, which has led me to append a random “seed” to the url on every call to get a unique quote every time. The interesting thing about this is that if I use the same modified url, I can pull the same quote every time (e.g. I can put a random hyphen anywhere in the last bit of the url and generate a unique random quote, then, when using this same url with the hyphen in the same location, i’ll pull the same quote every time).

  2. My function that actually grabs the random quote isn’t updating my quote and author variables in an expected way. This is to say that the displayed quote is the quote that was pulled from the API last, and the quote stored in the variable is the future quote, or the quote that will be displayed next. This leads the twitter button to work as expected, though it tweets the quote that will be displayed next in the generator. The generator is therefore one getJSON request behind the actual variables, even though I am updating the generator’s display with the (i think) the most current variables. This leads me to believe that the browser has some order of operations that I am unaware of, and for some reason the displayed quote happens out of order from what I expect it to.

Symptom 1 may be unrelated to 2, and the only hypothesis I have for symptom 1 is something related to browser cookies that is beyond my level of experience at the moment. Though I have ran the CodePen on various browsers, operating systems, and networks with the same behavior. It’s also interesting that the raw url put into a browser generates a unique json every time, either written as intended by the API or with my random seed appended to it.

Sorry for the long post. Any help, guidance, or discussion would be greatly appreciated.


Random quote generation issue
#2

The particular API you are using caches the response results each time unless you tell it not to. The way to do that is put the following before your $.getJSON call to the API

$.ajaxSetup( {cache: false} );

If you want the current quote in the tweet, then you need to move the following line to be inside your $.getJSON callback function after you have completed creating text.

$(".quote").html(text);

My quote machine works in IE, doesn't work in Chrome
#3

I would also like to make two suggestions to make your code more readable and make it DRY (Do Not Repeat Yourself).

#1) Consider using a Template Literal to create your text variable in the $.getJSON callback function.

text = `<blockquote>${quote}<cite>${author}</cite></blockquote>`;

#2) You repeat the following code two times. Either create a function which does the same thing and call it in each place or the first line to your getData function.


#4

@randelldawson Thank you for the quick reply and excellent feedback (and introducing to template literals)! It all works now!

I have also edited the title of this post to more appropriately reflect the nature of the problem now that I have the vocabulary.