Javascript Not Working When Tab Not Active

Question

So, I have a code here that works perfectly fine when I am viewing it in the active browser tab. But, as soon as I minimize or switch between other tabs of the browser (which is chrome by the way) the code starts giving issues. Here is the code below:

var a = document.getElementById("slidermain");
var b = a.getElementsByTagName("IMG");
var len = b.length;

var noOpac = 0;
var fullOpac = 10;
var imgNumb = 0;

function initFade(count){
    imgNumb = imgNumb + count;
    if(imgNumb < 0){
        imgNumb = len;  
    }
    if(imgNumb > len){
        imgNumb = 1;    
    }
    elem = b[imgNumb-1];
    startFadeEffect(elem);
}

function startFadeEffect(elem){
    var opacSetting = noOpac / 10;
    if(noOpac > 10){
        opacSetting = 1;    
    }
    elem.style.opacity = opacSetting;   
    elem.style.display = "block";
    noOpac++;
    var timer = setTimeout(function() { startFadeEffect(elem); }, 55);
    if(opacSetting == 1){
        clearTimeout(timer);
        elem.style.opacity = 1;
        noOpac = 0;
        setTimeout(function() { endFadeEffect(elem); }, 2000);
    }
}

function endFadeEffect(elem){
    var opacSetting = fullOpac / 10;
    if(fullOpac < 0){
        opacSetting = 0;    
    }
    elem.style.opacity = opacSetting;   
    fullOpac--;
    var timer = setTimeout(function() { endFadeEffect(elem); }, 55);
    if(opacSetting == 0){
        clearTimeout(timer);
        elem.style.opacity = 0;
        elem.style.display = "none";
        fullOpac = 10;
        return false;
    }
}

function autoFade(){
    var loop = setInterval("initFade(1)", 4000);    
}

Please not that I have been looking on this site for the answer, but mostly the ones I have found are JQuery based solutions; however, I am looking for a JavaScript only solution in which I might not have to use the get new date function. Please do not mark my question as duplicate as I have done good research. Thanks!

I must see a published version of this. Sounds interesting, never had this happen to me. Also, I highly doubt that the code above is causing that. I must be something outside of the code you are providing is the issue. Also.. what IS the issue your are experiencing exactly? — AlphaG33k, Mar 09 '16 at 02:10
Possible duplicate of [How can I make setInterval also work when a tab is inactive in Chrome?](http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome). Also, you need to describe the "issues" in detail. Why is your question **not** a duplicate of *"almost every related question on this site"*? — zero298, Mar 09 '16 at 02:15
I told u I am looking for JS only solution that one is JQuery! :( Also, I am looking for a solution that doesn't need now or before objects. — Sameer Bakshi, Mar 09 '16 at 02:32
@AlphaG33k what do you mean by outside the code please, if you can specify that I can explain you better? Thanks... — Sameer Bakshi, Mar 09 '16 at 02:38
The answer provided by @zero298 isn't using jQuery to solve the problem though. It stores the time as a variable outside the `setInterval` function and uses this to determine whether time has elapsed outside of the execution (i.e. when the tab is inactive) — jasonscript, Mar 09 '16 at 02:45
@jasonscript I do understand that, but how should I get the time like he has in javascript can u help? — Sameer Bakshi, Mar 09 '16 at 03:16

score 2 · Answer 1 · answered Mar 09 '16 at 02:18

2

This is not a problem with your javascript, but with Chrome. Chrome does some weird things with your tabs when they aren't active. Add code to "fix the mess", or account for not the tab being active, to recover after tabbing out and back in.

answered Mar 09 '16 at 02:18

thepiercingarrow

211
4
17

For example, your timer won't run whenever you time out. You can add code to sync your timer with a clock to adjust for the time error. – thepiercingarrow Mar 09 '16 at 03:43

Javascript Not Working When Tab Not Active

1 Answers1