0

I wrote a script to show numbers on a background, which are fading in and out. (some kind of matrix theme)

everything works fine until I leave a page to see any other browser tab. When I go back to tab with my script, numbers (that are fading in and out) overlay/overlap. As far as I understand setInterval() begins to knock off my function codeGhost() time intervals on a period of time that this tab was inactive.

Are there any ways to synchronize setInterval() and codeGhost() function not to have this issues, if user comes back from other browser tab back to page with my script??

Best regards.

var codeElement = 1;
function randomIntNum(){
    codeElement = Math.floor(Math.random()*10);
}
function getRandomInt(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(document).ready(function(){
    function codeGhost(){ 
     $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
        randomIntNum();
        $('#codeGhost').html(codeElement);
        $('#codeGhost').fadeIn( 2000, function(){ $('#codeGhost').fadeOut( 2000) });
    }
    setInterval(codeGhost, 4000);
})
4
  • Is there a fiddle that we can play around with? Sep 24, 2013 at 11:23
  • jsfiddle.net/A1ex5andr/9MFyz
    – Coderbit
    Sep 24, 2013 at 11:36
  • I caught it now again, after i minimized browsers window, for a few seconds and opened fiddle again.
    – Coderbit
    Sep 24, 2013 at 11:50
  • Sometimes the pauses between fadeIn are just getting longer and other time numbers are overlapping.
    – Coderbit
    Sep 24, 2013 at 11:56

1 Answer 1

1

Well, you don't have to declare your codeGhost() function inside your document ready handler - only your setInterval - so you could move that outside of the function, that's probably good practice.

Your fiddle seems to work ok but possibly you're getting multiple timeouts conflicting. I would change

setInterval(codeGhost, 4000);

for

setTimeout(codeGhost, 4000);

and then call the next timeout from within your codeGhost() function each time it runs:

function codeGhost(){ 
    $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
    randomIntNum();
    $('#codeGhost').html(codeElement);
    $('#codeGhost').fadeIn(2000, function(){ 
        $('#codeGhost').fadeOut(2000, function() {
            setTimeout(codeGhost, 4000);
        });
    });    
} 
4
  • no luck. I made it run faster and now you definately can see how it's iverlapping. jsfiddle.net/A1ex5andr/9MFyz/3
    – Coderbit
    Sep 24, 2013 at 13:41
  • Any other ideas, how can .fadeIn() and setTimeout() be synchronized?
    – Coderbit
    Sep 25, 2013 at 12:52
  • Sorry - hadn't realised the fades were at similar times to your timeout. You can have a callback function on each of those fades, so call your timeout after everything is completed - then nothing should run until it's finished and no overlaps. $('#codeGhost').fadeIn(2000, function(){ $('#codeGhost').fadeOut(2000, function () { setTimeout(codeGhost, 4000); }) }) Sep 25, 2013 at 14:31
  • OH! Now it looks so obvious, pure logic )) Thank you. Definitely I was looking for a decision in a wrong direction ))
    – Coderbit
    Sep 25, 2013 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.