JavaScript Callback Functions in JavaScript Callbacks with Timers Triggering an Animation

Tyree Mack
Tyree Mack
Full Stack JavaScript Techdegree Student 2,707 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
12,562 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
Tyree Mack
Full Stack JavaScript Techdegree Student 2,707 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
12,562 Points
setTimeout(() => { 
startAnimation();
 }, 2000);