Javascript - setInterval, animation, delay

Question

I know I can use animation and @keyframes in CSS but I want to have this problem solved below. I want to pause this animation later using clearInterval (<- but thats not my question).

What the problem is, this animation starts after one second. What can I do to make animation working immediately after refreshing the page? (- JSFIDDLE -)

<div id="myID"></div>
-----------------------
var i = 0;
var thesquare = document.getElementById('myID');
function FunRotate()
{
    switch(i)
    {
        case 0:
        thesquare.style.transform = 'rotate(20deg)';
        i++;
        break;

        default:
        thesquare.style.transform = 'rotate(-20deg)';
        i=0;
        break;
    }
}
setInterval(FunRotate, 1000);

EDIT: No it isn't a duplicate. I want to have the first step of animation immediately.

Your Edit comment, that is what the dupe answer does.... – epascarello Jun 18 '14 at 18:52 — epascarello, Jun 18 '14 at 18:52

score 0 · Answer 1 · answered Jun 18 '14 at 18:42

0

Add FunRotate(); once before your setInterval(FunRotate, 1000); ...

answered Jun 18 '14 at 18:42

weeger

429
2
9

score 0 · Answer 2 · answered Jun 18 '14 at 18:42

Invoke it immediately and set a timeOut for the next one at the end of the call:

function FunRotate()
{
    switch(i)
    {
    case 0:
    thesquare.style.transform = 'rotate(20deg)';
    i++;
    break;

    default:
    thesquare.style.transform = 'rotate(-20deg)';
    i=0;
    break;

    setTimeout(FunRotate, 1000);
}

FunRotate();

Javascript - setInterval, animation, delay

2 Answers2