Toon posts:

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

Pagina: 1
Acties:

Onderwerpen


  • Duncank
  • Registratie: december 2007
  • Laatst online: 24-09 22:01
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 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();
                  });
              }
          }
      }

  • JKP-Kipmans
  • Registratie: november 2003
  • Laatst online: 13-12-2013
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 JKP-Kipmans op 05-10-2010 10:27]

If you do the cooking by the book, then you'll have a cake.


  • Duncank
  • Registratie: december 2007
  • Laatst online: 24-09 22:01
Dat is een hele goeie! Thanks! Ik heb m aangepast en nu werkt het inderdaad zoals het de bedoeling was.


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee