Getting round the chrome and FF background tab processing errors for javascript

Question

Ok im really stuck ive been working on this all day and i just cant fatherm it out.

I have a javascript slideshow that uses setTimeout(). i understand that in chrome and some FF versions that it will slow down to reduce cpu usage and then speed up to catch up where it thinks it should be in the slideshow when i return to it.

However in doing this it not only speeds up but also ignores some of the questions in my code to jump out of my image array causing a brief undefined error. Which is just boggling Once it catches up it then runs fine??? im stuck any ideas how i can get round this and how to stop it from speeding up also?? this is the code im using.

<script type="text/javascript">

<?php 
$fetch_images = mysql_query($Aquery);
$fetch_title = mysql_query($Bquery);
$fetch_text = mysql_query($Cquery);
$num_rows =  mysql_num_rows($fetch_images);
?>
var i=0;
var products  = [<?php while($image = mysql_fetch_array($fetch_images)){echo "'".$image['imageurl']."',";}?>];
var productstitle  = [<?php while($title = mysql_fetch_array($fetch_title)){echo "'".$title['title']."',";}?>];
var productstext  = [<?php while($text = mysql_fetch_array($fetch_text)){echo "'".stripslashes($text['strapline'])."',";}?>];
function slideShow<?php echo $timerTag;?>(){
    if (i<=(products.length-1)){
        $('#headerslideimage').fadeTo("slow", 0, function() {
        <?php if(page('pageurl') != 'home'){?>
            document.getElementById('headerslidetitle').innerHTML=productstitle[i];
            document.getElementById('headerslidetext').innerHTML=productstext[i];
        <?php }?>
        document.getElementById('headerslideright').innerHTML="<img id='headerslideimage' src='"+products[i]+"' alt='"+productstitle[i]+"'/>";
        i++;
        $('#headerslideimage').fadeTo(4000, 100, function() {});
    });
} else {
    i = 0;
    $('#headerslideimage').fadeTo("slow", 0, function() {
    <?php if(page('pageurl') != 'home'){?>
    document.getElementById('headerslidetitle').innerHTML=productstitle[i];
    document.getElementById('headerslidetext').innerHTML=productstext[i];
    <?php }?>
    document.getElementById('headerslideright').innerHTML="<img id='headerslideimage' src='"+products[i]+"' alt='"+productstitle[i]+"'/>";
    i++;
    $('#headerslideimage').fadeTo(4000, 100, function() {});
});
}
setTimeout("slideShow<?php echo $timerTag;?>()", 5000);
}

score 0 · Answer 1 · edited May 23 '17 at 12:27

Is one of your animation functions eventually calling requestAnimationFrame? setInterval&setTimeout do not stop running when you minimize or switch tabs but requestAnimationFrame does. The result is that if you are calling requestAnimationFrame from an interval (or chained timeout) task you'll continuously queue up new tasks for requestAnimationFrame to rapidly play through when the tab has focus again.

Check out this related question: Jquery setInterval on minimize

score 0 · Answer 2 · answered May 22 '12 at 01:46

Use Page Visibility API within your function to check if the page is currently visible. If it is not skip executing anything that iteration. This will have an added bonus of using less of your users resources when they are not interacting with your page.

Getting round the chrome and FF background tab processing errors for javascript

2 Answers2