Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Callback Functions in JavaScript Callbacks with Timers Triggering an Animation

Is there a bug?

I think I have it right, but I keep getting an error saying"Bummer, remember there are 1000 milliseconds in a second.

const section = document.getElementById("animateMe");

function startAnimation() {
  //Applies spinning animation to section element
  setTimeout(startAnimation, 2000);
  section.className = "spin";
<!DOCTYPE html>
<html lang="en">
        <link rel='stylesheet' href='styles.css'>
        <section id="animateMe">
            <p>Animate Me in 2 Seconds!</p>
        <script src='app.js'></script>

3 Answers

Hey Lloyd,

There's no bug there ;). You are almost right, but you are missing one thing.

So you currently have a function called startAnimation(). And you need animate it, so it would start working in 2 seconds. You use setTimeout, that is correct. But currently what you are doing is calling

setTimeout(startAnimation, 2000); //startAnimation is the "main" function

with startAnimation() inside startAnimation() function. Try adding the setTimeout outside the "main" function, see if it works then.

Let me know if it's not clear enough, I'll try to explain better then.

You are calling

setTimeout(startAnimation, 2000)

inside the startAnimation function itself. So it will call itself over and over again. You should have the setTimeout call outside of the startAnimation function.

Thank you both! I get it now and have passed on.

Thank you :)