Post: #1Jak zatrzymać kolejne wykonywanie skryptów podczas wykonywania jednego. Opcje

[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:

[XML] pobierz, plaintext 
var buttonactiv="firma";
var policeman=0;
$(document).ready(function()
 
{
 
 
$("#tringle").css("left","0px").animate({"left": "+=580px"}, "slow");
 
    $("#menu table tr td img").hover(
 
        function(){
            var imgh = $(this).attr('id');
 
            $(this).attr('src','img/main/'+imgh+'2.png');    
        },
        function()
        {
            var imgh = $(this).attr('id');
 
            $(this).attr('src','img/main/'+imgh+'1.png');
            }
        );
 
    $("#menu table tr td img").click(
        function(){
 
         $("#test2").html(policeman);
        if(policeman==1)
        {
 
        return ;
        }
 
        policeman=1;
 
        var lastlink = "#" + buttonactiv +"txt";
        $(lastlink).css("display","none");
 
        buttonactiv=$(this).attr('id');
        var link = "#" + buttonactiv +"txt";
        $(link).show("fast");
        $("#down2 img").attr('src','img/main/'+buttonactiv+'l2.png');
        $("#liner").attr('src','img/main/'+buttonactiv+'r.png');
        $("#linel").attr('src','img/main/'+buttonactiv+'l.png');
        $("#tringle img").attr('src','img/main/'+buttonactiv+'tr.png');
 
        $("#tringle").css("left","0px");
        $("#tringle").animate({"left": "+=580px"}, "slow");
        $("#test").html(policeman);
        $(".block").stop();
        policeman=0;
        }
    );
 
}
);
[XML] pobierz, plaintext 

[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.

Ten post edytował peterparker 23.09.2011, 22:07:57

[kamil4u]

Popatrz do manual-a na różne funkcje jQuery np.
http://api.jquery.com/animate/ -> complete ->

If supplied, the complete callback function is fired once the animation is complete.

i wykorzystaj co trzeba

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

zobacz różnicę

[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 
 $('#test').animate({'left', '100px'}, 2000);
 //to to samo co:
 setInterval(function(){
  //tu zmiana 'left' o ileś tam px - popatrz na czas - tylko 50( tak założyłem )
 }, 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 ).

Ten post edytował kamil4u 24.09.2011, 16:29:22