CODEWITHSUNDEEP
javascriptjquerysetinterval
Scott
Scott

Reputation: 21882

setInterval function using jquery is causing a "blink"

Personal project using jQuery.

I'm trying to create a function that runs on the hour for 5 seconds. I've done this by getting the current minutes and acting when they are at '00'. (Although for testing the minutes need to be manually changed to the next minute, unless you want to wait an hour to see it run again.)

The function acts on 2 objects, one to add/remove a class, the other to slideUp/Down.

It works, but after the initial running, the slideDown/Up jQuery causes a "blink" every 5 seconds for the rest of the current minute.

I've tried setting the setInterval for 5000, however that hasn't solved the issue. I'm at my wits end really.

While I am also using moment.js elsewhere. This function isn't using moment(). Primarily because I haven't been able to get functions working with moment() either.

Just head to the ....

jsFiddle example

Remember to set the =='00' to the next minute -- sure makes testing easier I really appreciate anyone waiting for this to run. I know it can be a pain to have to wait a minute to see the function at work.

If you watch the function run for 5 seconds, it will stop... but continue watching.. the slideDown() will repeat every 5 seconds until the minute is no longer XX.

How can I stop this repeat??

Thanks!

Upvotes: 0

Views: 592

Answers (2)

Leesan
Leesan

Reputation: 36

There're two place for fix.

1. miss usage for 'clearInterval'
clearInterval parameter is The ID of the timer returned by the setInterval() method. reference this link, w3c definition for clearInterval.

var intervalId = setInterval(function() { alarm(); }, 5000);
...
clearInterval(intervalId );

2. secs >= "05" condition is wrong
change string "05" to int 5.

Upvotes: 1

Scott
Scott

Reputation: 21882

Believe it or not I sorted it a few moments after posting this.

My conditional was off, and I thought I tried everything. Guess not.

This works

if((mins == "29") && (secs <= '05')) {

          $('#focus').slideDown(500);
          $('.projcnt').addClass('jump');

     } else {

          $('#focus').slideUp(300);
          $('.projcnt').removeClass('jump');

     }

And the ...

working, updated fiddle

Upvotes: 0

Related Questions