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

MARIA Quadri
MARIA Quadri
2,572 Points
Posted by MARIA Quadri
MARIA Quadri
2,572 Points

CallBack function : Please help me to solve this problem

I know I need to use 2000 as a the delay for 2 seconds but not sure where it goes in the code.

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

function startAnimation() {
  //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>
Kevin Goudswaard
Kevin Goudswaard
11,061 Points
Kevin Goudswaard
Kevin Goudswaard
11,061 Points

If you're ever stuck looking for the appropriate fucntion to run, check the Mozilla Developer Network.

Here is a Link

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

function startAnimation() {
          section.className = "spin";
}

setTimeout(startAnimation, 2000);

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

You need to use the setTimeout function that you learned about in the beginning of this section of the course.

The setTimeout function takes the function you want to execute at a later time as the first argument and then the amount of time it should wait as a second argument.

So in order to run the startAnimation function 2 seconds after the page loads you simply need to call the setTimeout function at the bottom of the page like this:

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

function startAnimation() {
  //Applies spinning animation to section element
  section.className = "spin";
}

setTimeout(startAnimation, 2000)