Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Post: #1Jak zatrzymać kolejne wykonywanie skryptów podczas wykonywania jednego.
Forum PHP.pl > Forum > XML, AJAX
peterparker
Mam menu napisane w jquery. Po kliknięciu na jeden z przycisków menu pokazuje jednego diva oraz ukrywam innego. Oprócz tego po załadowania diva pokazuje się trójkąt który najpierw za pomocą funkcji

$("#tringle").css("left","0px"); -przesuwany jest w lewy róg ;

a później ślizga się się w prawo 580px

$("#tringle").animate({"left": "+=580px"}, "slow");
Wszystko jest ok gdy klikamy powoli tak że wszystkie skrypty zdąża się wykonać.

Gdy klikam w pojedyncza zakładkę zbyt szybko to trójkąt przesuwa się bardzo dużo w prawo jak klikniemy szybko 3 razy to przesunie się 1740 px ,pomimo tego że przed wykonaniem animacji trójkąt umiejscawiany jest 0px od lewej krawędzi.

Gdy za szybko klikam w różne zakładki to ładują się naraz wszystkie boxy.

Jak zablokować wykonywanie skryptów gdy wykonywany jest jeden skrypt. I jak zablokować wielokrotne wykonywanie skryptów po kliknięciu na jeden przycisk?

próbowałem zrobić to tak ale mi to nie działa:

  1. var buttonactiv="firma";
  2. var policeman=0;
  3. $(document).ready(function()
  4.  
  5. {
  6.  
  7.  
  8. $("#tringle").css("left","0px").animate({"left": "+=580px"}, "slow");
  9.  
  10. $("#menu table tr td img").hover(
  11.  
  12. function(){
  13. var imgh = $(this).attr('id');
  14.  
  15. $(this).attr('src','img/main/'+imgh+'2.png');
  16. },
  17. function()
  18. {
  19. var imgh = $(this).attr('id');
  20.  
  21. $(this).attr('src','img/main/'+imgh+'1.png');
  22. }
  23. );
  24.  
  25. $("#menu table tr td img").click(
  26. function(){
  27.  
  28. $("#test2").html(policeman);
  29. if(policeman==1)
  30. {
  31.  
  32. return ;
  33. }
  34.  
  35. policeman=1;
  36.  
  37. var lastlink = "#" + buttonactiv +"txt";
  38. $(lastlink).css("display","none");
  39.  
  40. buttonactiv=$(this).attr('id');
  41. var link = "#" + buttonactiv +"txt";
  42. $(link).show("fast");
  43. $("#down2 img").attr('src','img/main/'+buttonactiv+'l2.png');
  44. $("#liner").attr('src','img/main/'+buttonactiv+'r.png');
  45. $("#linel").attr('src','img/main/'+buttonactiv+'l.png');
  46. $("#tringle img").attr('src','img/main/'+buttonactiv+'tr.png');
  47.  
  48. $("#tringle").css("left","0px");
  49. $("#tringle").animate({"left": "+=580px"}, "slow");
  50. $("#test").html(policeman);
  51. $(".block").stop();
  52. policeman=0;
  53. }
  54. );
  55.  
  56. }
  57. );
kamil4u
Dość krótko analizowałem Twój kod, ale jeśli policeman jest zmienną statusową(flagą), czyli sprawdza czy odbywa się animacja czy nie i w zależności od tego postępuje dalej to pomysł jest słuszny i prawidłowy.

Rada: skorzystaj z tzn. callback-a, aby zmienić stan.
peterparker
Tak tylko nie wiem jak użyć callbacka.
Wg. mnie zmienna policeman powinna zdawać egzamin , ale jej wartość zawsze przed wywołaniem = 0 i nie wpływa na działanie skryptu.
kamil4u
Popatrz do manual-a na różne funkcje jQuery np.
http://api.jquery.com/animate/ -> complete ->
Cytat
If supplied, the complete callback function is fired once the animation is complete.
i wykorzystaj co trzeba smile.gif

Pobaw się:
- http://jsfiddle.net/cRbRq/
- http://jsfiddle.net/cRbRq/1/

zobacz różnicę smile.gif
peterparker
Bardzo dziękuje za pomoc teraz wszystko działa. Ale wciąż nie rozumiem dlaczego mój pomysł z policmanem nie jest ok. Czy jquery najpierw czyta zmienne a dopiero później wykonuje amiacje?
kamil4u
Jak wiesz jQuery to biblioteka JS. animate to funkcja, która działa tak, że używa setInterval i przesuwa div-a w iluś tam krokach o ileś tam jednostek. Załóżmy, że wygląda to tak:
[JAVASCRIPT] pobierz, plaintext
  1. $('#test').animate({'left', '100px'}, 2000);
  2. //to to samo co:
  3. setInterval(function(){
  4. //tu zmiana 'left' o ileś tam px - popatrz na czas - tylko 50( tak założyłem )
  5. }, 50);
[JAVASCRIPT] pobierz, plaintext


Teraz JS działa tak, że najpierw wywołuje setIntrval, po czym nie czeka na zakończenie tego skryptu tylko uruchamia go w tle i przeskakuje do następnych funkcji - piszę te słowa od strony praktycznej, nie interesowałem się jak to działa dokładnie od strony programistów przeglądarek.

Jak interesuje Cię jak robi się takie animacje ręcznie zajrzyj do źródeł jQuery lub poproś mnie to dam Ci mój skrypt( jak zwykle nie dokończony ).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.