[jQuery] Animations stapelen op bij tab blur in chrome

[Gersomvg]

Zie ook hier:

• http://stackoverflow.com/...n-coming-from-another-tab
• http://stackoverflow.com/...tab-is-inactive-in-chrome
• http://stackoverflow.com/...ching-breaks-my-slideshow

En nog 10 van die topics.

Ik heb even snel een probleemreproducering gemaakt: http://jsfiddle.net/8nvHE/
Als je dus in Chrome naar een ander tabblad switcht en vervolgens na een paar seconde weer terug gaat, maakt de slider een inhaalslag, omdat Chrome t.b.v. de CPU animaties op niet actieve pagina's soort van pauzeert.

jQuery vertelt mij het volgende hierover:

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

Dat vetgedrukte gedeelte ^^ heb ik volgens mij toegepast in het bovenstaande voorbeeldje op jsfiddle. Waarom stapelen de animaties nu nog steeds op in de queue? Zie ik iets over het hoofd?

[Gersomvg]

Never mind, problem solved. Dit is m'n huidige oplossing:

Niet werkend:

JavaScript:

$(document).ready(function() {
    var teller = 0;
    var ul = $('.activiteiten ul');
    function wissel(){
        ul.animate({'top':-(teller*30-5)+'px'},300,null,setTimeout(wissel,1000));
        teller++;
        if (ul.find('li').length == teller)
        {
            teller = 0;
        }
    }
    wissel();
});

Wel werkend:

JavaScript:

$(document).ready(function() {
    var teller = 0;
    var ul = $('.activiteiten ul');
    function wissel(){
        teller++;
        if (ul.find('li').length == teller)
        {
            teller = 0;
        }
        ul.delay(1000).animate({'top':-(teller*30-5)+'px'},300,null,wissel);
    }
    wissel();
});

Waarschijnlijk omdat de timeout nu echt een onderdeel wordt van de jQuery queue?

[ Voor 4% gewijzigd door Gersomvg op 06-08-2011 13:59 ]

[R4gnax]

Gersomvg schreef op zaterdag 06 augustus 2011 @ 13:58:
Waarschijnlijk omdat de timeout nu echt een onderdeel wordt van de jQuery queue?

De timeout wordt nu inderdaad onderdeel van de queue. Je bent nu overgeschakeld op het gebruik van jQuery.fn.delay, waar je niet werkende voorbeeld setTimeout simpelweg verkeerd toepast.
 

JavaScript:

ul.animate({'top':-(teller*30-5)+'px'},300,null,setTimeout(wissel,1000));

 
setTimeout geeft niet een delegate functie terug die de wissel functie 1000ms later aanroept, maar geeft een integer ID terug die het gebruikte timer slot identificeert (waarmee een timeout later gecanceled zou kunnen worden). Meteen wanneer de animatie start wordt er dus al voor gezorgd dat na 1000ms de wissel functie uitgevoerd wordt en niet pas wanneer de animatie afloopt.

De correcte versie zou zijn:
 

JavaScript:

ul.animate({'top':-(teller*30-5)+'px'},300,null, function(){ setTimeout(wissel, 1000); });

[Gersomvg]

Dus als je iets in dit geval niet in een anonymous function zet, wordt het gelijk uitgevoerd en niet pas op het moment dat de animatie klaar is?

Klinkt als basics

[Bosmonster]

Ja, aangezien die eerste gewoon de functie uitvoert en de return-waarde doorgeeft. De tweede maakt een anonieme functie aan en geeft de reference daarnaar terug.

Javascript/jQuery basics. Dit soort callback-constructies zit jQuery vol mee, dus als je dat niet goed doet krijg je het nog lastig

[ Voor 22% gewijzigd door Bosmonster op 06-08-2011 20:52 ]

[vvs-odrs]

Ik heb een soort gelijk probleem...
Ik heb naar de bovenstaande code van u gekeken, maar kan er niet echt iets uit op maken.

Mijn probleem doet zich voor op *snip*

Broncode die zorgt voor de fade jQuery is:

JavaScript:

$(document).ready(
        function(){
 
            $('.fade').innerfade({
                speed: 'slow',
                timeout: 5000,
                type: 'random_start',
                containerheight: '356px'
            });
            
        }
    ); 

Verder bijbehorende script is: *snip*

Alvast bedankt, indien iemand dit probleem kan verhelpen.

[ Voor 12% gewijzigd door RobIII op 09-08-2011 21:00 ]

[RobIII]

vvs-odrs schreef op dinsdag 09 augustus 2011 @ 16:01:
Alvast bedankt, indien iemand dit probleem kan verhelpen.

Euh, nee. Kan iemand even...?
Sorry, die vlieger gaat hier dus niet op We zijn best bereid een zetje in de juiste richting te geven maar daarvoor verwachten we wel eigen inzet. Zie daarvoor ook onze Quickstart.

Onder die eigen inzet verstaan we, o.a., een (uitgeklede!) testcase met enkel-en-alleen de hoognodige CSS/HTML/whatever om je probleem te illustreren (en reproduceren). Daar help je in eerste instantie jezelf mee (want je creëert een omgeving met weinig variabelen waardoor je makkelijk kunt uitsluiten waaraan iets wel/niet kan liggen) en in de tweede plaats ons: wij hoeven ons niet door allerlei "vreemde" (als in: niet eigen) CSS/HTML/whatever heen te worstelen om je probleem te bekijken.

Zo'n testcase plaats je dan op een testserver, een testdomein, een (sub)map op je eigenlijke domein of I-don't-care maar het linken naar een website die zo-goed-als-af is neigt al heel snel naar spam.

[ Voor 5% gewijzigd door RobIII op 09-08-2011 21:07 ]

[ameesters]

ik zou als ik jouw even kijken naar een jquery plugin genoemd: hover intent. je kan natuurlijk altijd zelf een oplossing bedenken, maar dit is een snellere fix