Random Quote Machine AJAX Request Delay

Random Quote Machine AJAX Request Delay
0

#1

Good day fellow campers!

I am almost done with my random quote(lyrics) generator. Here’s my pen.

This is more of an added aesthetic value, but can you tell me how to set the ajax request to be delayed, so that my loading animation will be finished first?

I have set a timeout function of 500ms for my loading function to execute first before calling the $(document).ajaxComplete function. However, it is not working. Any inputs will help. Thank you and happy coding!


#2

Not sure how you could do that. I do want to say, that I like the design! One tip: use overflow-x: hidden; on the body, to remove the scrollbar (when text comes in).


#3

Try to write setTimeout() function like this:

setTimeout(() => {complete(lyrics,songTitle,artist)},500);

#4

I am also wondering how to do that. Thank you for pointing it out! Also, I am glad that you like the design :smile:


#5

It says unexpected token {
I will still try and look for a way to fix this. Thank you for your input!


#6

Works for me. Are you sure that you wrote exactly like I suggested (especially =>)?


#7

oh. I thought the => meant that I change the () to {}. lol sorry my bad. I’ll try it later when I come back. Thank you!


#8

It works! Wow, thank you so much! May I know why this one works and the traditional syntax did not? What’s the difference between the two? Thank you!


#9

Your syntax was incorrect.

The setTimeout() function should look like this:

setTimeout(function() {
  doSomethingAfterTimeout()
  }, 500)

Your’s was:

setTimeout( doSomethingAfterTimeout(), 500)

The way I wrote with => is just a newer syntax (called ES2015), you replace word function with => (fat arrow) and put it between parens and brackets. You could write it also like this:

setTimeout(function() {complete(lyrics,songTitle,artist)},500);

#10

Ah okay. Thank you for the explanation. I really do have a lot more to learn. Cheers!