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);
})