/    Sign up×
Community /Pin to ProfileBookmark

Running 2 function on setInterval

Copy linkTweet thisAlerts:
Aug 06.2021

Is it possible to run 2 functions on setInterval one after the other with some delay and then repeat?

So far I have tried this but it doesnt work

“`
 const repeatAnimation = () => {
forwardAnimation();
setTimeout(reverseAnimation, 250);
};

preloaderLogo.setInterval(repeatAnimation(), 250);
“`

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumAug 06.2021 — This is a common issue when dealing with setInterval/setTimeout/AddEventListener: The braces after the function name cause the function to be executed at once and it's return value is handed over to setInterval. However setInterval needs a reference to the funktion so that it can be called later. Omit the braces and everything will be fine:

`preloaderLogo.setInterval(forwardAnimation, 250);`
Copy linkTweet thisAlerts:
@codyhillauthorAug 06.2021 — @Sempervivum#1635183 I get this

preloaderLogo.setInterval is not a function

with my first example, I deleted preloaderLogo and the animation would run only once, and then it would just stop...

if I would leave the preloaderLogo the animation would still only run once, but it would also throw the error above.

I think the issue might be that I copied and pasted the animation that you helped me with, the one with mouseover and mouseleave. Only I deleted the events. I tried reusing the same functions but I did not know how to change the element it's being applied to.
Copy linkTweet thisAlerts:
@daveyerwinAug 06.2021 — ``<i>
</i>&lt;style&gt;
*{transition: all 2s}
&lt;/style&gt;
&lt;div id=animay&gt;clickme&lt;/div&gt;
&lt;script&gt;
setInterval(animate,5000)
function animate(){
animay.style.color='red';
setTimeout(backUp,2000)
}
function backUp(){
animay.style.color='black';
}
&lt;/script&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@SempervivumAug 06.2021 — Oh, I overlooked this: setInterval is a member of the window object, preloaderLogo doesn't have such function.
Copy linkTweet thisAlerts:
@codyhillauthorAug 06.2021 — @Sempervivum#1635183 it works like this
``<i>
</i> const repeatAnimation = () =&gt; {
forwardAnimation();
setTimeout(reverseAnimation, 1500);
};

setInterval(repeatAnimation, 2500);<i>
</i>``
I don't know why

Also it seems like it waits 2500ms to start the animation. Any idea how I could fix that?
Copy linkTweet thisAlerts:
@codyhillauthorAug 06.2021 — @DaveyErwin#1635185 just figure it out myself. Thx tho!
Copy linkTweet thisAlerts:
@SempervivumAug 06.2021 — setInterval doesn't call the function immediately but only when the interval has run out. You need to call the function yourself when you want it to be executed immediately.
Copy linkTweet thisAlerts:
@codyhillauthorAug 06.2021 — @Sempervivum#1635189 I was afraid you gonna say that
Copy linkTweet thisAlerts:
@codyhillauthorAug 06.2021 — @Sempervivum#1635189 I have 2 SVG's that are the same logo. Is it possible to have the same function that animate one (the one that you wrote for me) work of the other logo SVG?
Copy linkTweet thisAlerts:
@SempervivumAug 06.2021 — You mean the recent thread where the cards are tilting? And you intend to apply the same effect to the other one? Only one Direction or the other way round too?
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...