jQuery setInterval trop rapide lorsque l'onglet est inactif

Question

Lorsque l'onglet sur lequel mon site Web est activé est inactif, mon diaporama commence à changer d'image trop rapidement et gâche le tout.

Y a-t-il un moyen de résoudre ce problème?

var img_src = ["1.png", "2.png", "3.png", "4.png"]; 
var delay = 8000; 
var first_run = true; 

function switch_pic(position){ 
    $("#show").attr("src", img_src[position]).fadeOut(0).fadeIn(4000).fadeOut(4000); 
} 

$(document).ready(function(){ 
    var i = 0; 
    if(first_run){ 
    switch_pic(i); 
    first_run = false; 
    i++; 
    } 
    window.setInterval(function(){ 
    switch_pic(i); 
    delay += 8000; 
    i++; 
    if(i > 3){ 
     i = 0; 
     window.clearInterval(); 
    } 
    }, delay); 
}); 

Answer 1

pourrait envelopper le code dans ceci:

$(document).ready(function(){ 
    $([window, document]).focusin(function(){ 
     //code run when tab is selected 
    }).focusin(function(){ 
     //code to stop all animation 
    }); 
}); 

Cela ne ferait que laisser le diaporama lorsque l'utilisateur consulte votre site.

Answer 2

Je ne sais pas pourquoi les choses s'accélèrent. Normalement, les minuteurs des onglets en arrière-plan seront ralentis à au moins une seconde, mais cela ne devrait pas affecter votre scénario. Je suggère d'utiliser console.log() pour suivre les appels à vos fonctions.

En outre, vous pouvez simplifier votre boucle principale un peu:

$(document).ready(function(){ 
    var i = 0; 
    window.setInterval(function(){ 
    switch_pic(i++); // increase i after call 
    if(i > 3) i = 0; // reset i 
    }, 8000); 
});