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

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.

1 Like

@camperextraordinaire 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.

1 Like