[js] Functie wordt 2x uitgevoerd, 1 keer aangeroepen

[Duncank]

Ik ben bezig met een project waarbij ik 4 afbeeldingen in 2 groepen van 2 op een pagina laat weergeven, en deze door fades laat afwisselen. Dit gebeurd door het aanroepen van een functie.

De variabele "relatedVideosTimer" wordt bovenaan in de pagina gedefinieerd en zo als globale variabele gezet. De eerste keer dat ik wil dat de afbeeldingen gaan faden roep ik de functie "relatedVideosSlider('first'); aan. De afbeeldingen faden in en de setInterval gaat aan het werk.

Zoals je in de code ziet staat er op de eerste regel van de functie een alert, deze komt elke 4 seconden nu 2 keer direct achter elkaar, wat mij verteld dat de functie ook 2 keer uitgevoerd wordt. De timer loopt dan ook dubbel zo snel.

Wanneer ik wil dat de afbeeldingen stoppen met faden en verdwijnen voer ik de functie 'relatedVideosSlider('last"); aan, die er vervolgens voor zorgt dat mijn ingestelde alerts nog maar 1 keer per 4 seconden verschijnen, de timer wordt dus nog maar 1 keer uitgevoerd nu.

Betreffende deze slider komt op de verdere pagina niets aan bod, en voordat ik de functie met variabele 'first' heb aangeroepen krijg ik geen alerts te zien, een teken dat de timer nog niet loopt.

code:

 function relatedVideosSlider(val){
          alert('ping');
          if(val == 'first'){
              $('.videoEndInner .videoEndTop .related img:nth-child(1),.videoEndInner .videoEndTop .related img:nth-child(2)').fadeIn('normal',function(){
                  relatedVideosTimer = setInterval('relatedVideosSlider()',4000);
              });
          }
          else if(val == 'last'){
              clearInterval(relatedVideosTimer);
              $('.videoEndInner .videoEndTop .related img:visible').fadeOut('normal');
          }
          else{
              if($('.videoEndInner .videoEndTop .related img:nth-child(3)').is(':visible')){
                  $('.videoEndInner .videoEndTop .related img:visible').fadeOut('normal',function(){
                      $('.videoEndInner .videoEndTop .related img:nth-child(1),.videoEndInner .videoEndTop .related img:nth-child(2)').fadeIn();
                  });
              }
              else{
                  $('.videoEndInner .videoEndTop .related img:visible').fadeOut('normal',function(){
                      $('.videoEndInner .videoEndTop .related img:nth-child(3),.videoEndInner .videoEndTop .related img:nth-child(4)').fadeIn();
                  });
              }
          }
      }

[Verwijderd]

Ik zie dat je de fadeIn()-functie aanroept voor twee elementen, wellicht dat daardoor de callback met daarin de setInterval() ook twee keer wordt aangeroepen?

[edit]
De jQuery-documentatie is het met me eens:

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

[ Voor 59% gewijzigd door Verwijderd op 05-10-2010 10:27 ]

[Duncank]

Dat is een hele goeie! Thanks! Ik heb m aangepast en nu werkt het inderdaad zoals het de bedoeling was.