Lag in jQuery-queue bij verlaten tabblad.

[ErikBooy007]

Goedemiddag dames en heren!

Als ik in jQuery een herhalende animatie gebruik (die overigens prima werkt, zolang je ernaar zit te kijken), merk ik iets vreemds als je het tabblad waar de animatie op loopt verlaat en iets later terugkomt. Met name in Google Chrome merk ik dit.

Wat is het geval? Bij terugkeer naar het tabblad lijkt het alsof alle animaties vanaf het moment van unfocus van het tabblad worden opgespaard en supersnel achter elkaar afgespeeld. In het geval van bijvoorbeeld een fotoslideshow heeft dat tot gevolg dat de foto's in een veel te hoog tempo achter elkaar worden afgewisseld.

Mijn vraag is, hebben meer mensen hier last van en belangrijker nog, wat kan ik doen om dit te voorkomen. Staat niet erg netjes natuurlijk...

 

[csshunter]

Hoi Erik,
Vragen ... :

• "Hebben meer mensen hier last van?" - ik heb geen pagina met jQuery-carrousel bij de hand; heb je een voorbeeld / testpagina om te proberen?
• "Met name in Google Chrome merk ik dit." - Dus ook in andere browsers? Dewelke? / versie(s)?

Bijkomende analyse-vraag:

• Gebeurt het alleen bij gebruik van jQuery, en niet bij andere javascripts waar een setInterval in zit? > Dan is jQuery de boosdoener.

Om het laatste te testen heb ik wel een testpagina paraat:

• www.developerscorner.nl/css-exercitions/foto-carrousel.php

Wat blijkt? Bevindingen:

• Met FF3.5.14 (die oude, jeweetwel ), IE6 (geen tabs, maar ander venster), IE7, IE8, Opera9.64 en Safari5.0.3 geen pijn: het javascript blijft op de achtergrond doorfietsen, en gaat bij terugkomst op de tab verder waar het op de achtergrond gebleven is.
• Alleen Chrome heeft kuren: die stapelt inderdaad de intervals op elkaar, bewaart ze kennelijk, en draait ze bij terugkomst op de tab roets achter elkaar af.
• Het is dus geen jQuery-probleem, maar een Chrome-probleem!
• Verder: als je twee Chrome-vensters hebt, en het script in het achtergrond-venster, is er bij venster-wissel geen probleem: dan worden de intervals niet opgezouten, maar draaien ze op de achtergrond gewoon door.

De hamvraag:

... belangrijker nog, wat kan ik doen om dit te voorkomen?

1. Melden bij Chrome, want in de Chrome-problemen met setInterval zie ik 'm er zo gauw niet bij staan. - Maar dat kan wel een een lange-termijn oplossing blijken te zijn.
2. Intussen een script-stopper inbouwen voor als de pagina focus verliest? *)
   Met een Google www.google.nl/search?q=stop+javascript+if+page+is+out+focus kwam ik in de 4e hit deze tegen: stackoverflow.com/questions/6522399/javascript-jquery-execute-javascript-only-on-page-focus. Diverse suggesties, maar geen idee of die bij Chrome werken in combi met de door jou gebruikte jQuery code.

Met vriendelijke groet,
CSShunter
_________
*) Zelf laat ik Chrome maar lekker zitten: ik ga in het foto-carrousel geen script-stopper alleen voor Chrome maken.

 

[ErikBooy007]

De pagina waar het op speelt kan/mag ik nog niet openbaar maken, maar het lijkt er dus op dat je in de loop van je post de oorzaak gevonden hebt. Ik ga het eens melden bij Chrome, eens zien wat daar van komt!

Hartelijk dank en als ik meer weet zal ik het hier posten.

 

[csshunter]

Hmm, 't zou ook nog iets kunnen zijn dat zowel in het jQuery-script als in het script van mijn voorbeeld zit, in combinatie met Chrome.
Ik was namelijk een "minimale fout-pagina" aan het fabrieken met een plaatjes-wissel script à la carrousel.js van mijn voorbeeld, en kwam hier op uit:

• www.developerscorner.nl/csshunter/tests/chrome-setTimeout-test.htm

Het merkwaardige is, dat Chrome het hier wel goed doet! :shocked:
Toch is in principe hetzelfde fading-script gebruikt...
Ik heb geen idee wat het op de andere manieren kan zijn, dat het bibber-gedrag in Chrome triggert.

Met vriendelijke groet,
CSShunter