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! While you're at it, check out some resources Treehouse students have shared here.

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

Posted by Tyree Mack
.a{fill-rule:evenodd;}techdegree
Tyree Mack
Full Stack JavaScript Techdegree Student 3,385 Points

Triggering an Animation

I am not sure what I am getting wrong in this objective. The keyword within the question was "function should be triggered 2 seconds after the page loads," which made me think I will be using the setTimeout function. However, when I insert setTimeout(startAnimation, 2000), I receive this bummer hint: Remember a timeout is 1000 milliseconds for every second. Not sure what this indicating since I am putting 2000 as equal to 2 seconds. What am I missing from this objective?

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

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

1 Answer

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

setTimeout takes a callback and a duration in milliseconds. 

setTimeout(function(){ 
section.className = "spin";
 }, 2000);

You can use it like this too but it looks like they don't want it this way.

setTimeout(() => {
section.className = 'spin';
}, 2000);
Tyree Mack
.a{fill-rule:evenodd;}techdegree
Tyree Mack
Full Stack JavaScript Techdegree Student 3,385 Points

It seems like you're using an anonymous function and the directions specifically say do not use that type of function. I understand setTimeout uses duration in milliseconds, but it seems as though no matter what number I insert, the bummer hint continues to say "Remember a timeout is 1000 milliseconds for every second." I'm just confused in understanding what I am doing wrong.

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points 
setTimeout(() => { 
startAnimation();
 }, 2000);