$(this), czy e.target, co przekazywać?

0

bind: function() {
(.....)

stepsContainer.delegate('button.next_step', 'click', function () {
            if($(this).data('clicked')) {
                return false;
            } else {
                $(this).data('clicked', true);
                self.gotoNextStep($(this));
            }
        });
}
gotoNextStep: function (target) {
        var currentStepHTML = $("div[data-step='" + this.currentStep + "']");

        currentStepHTML.fadeOut(function () {
            $(this).next().fadeIn(function(){
                target.data('clicked', false);
            });
        });

        this.currentStep++;
    },
 <button class="next_step">
                            <span>Dalej</span>
                        </button>

Kilka dni temu wrzucilem zapytanie odnosnie formularza krokowego. Oto fragment kodu. Podczas gdy kliknalem 2 razy szybko w przycisk dalej sypał się html, ponieważ kroki mam na zasadzie divów (jeden fadeout drugi fadein). Chciałem uniemożliwić takie zachowanie i umożliwić tylko jeden klik w button, ale tak zeby po zmianie kroku button znowu dzialal (mozna sie cofac w formularzu).

Do sedna. Chcialem przekazac do innej funkcji target, zeby ustawic data-clicked na false. W momencie gdy przekaze event, to czasmi gdy klikne na span, to wszystko odbywa sie na spanie, a to mnie nie urządza. Postanowiłem więc przekazać $(this), czyli button, na ktory klikamy. Zastanawia mnie czy jest to poprawne rozwiazanie tego problemu, czy powinienem to zrobic inaczej?

Może marudze, ale jakoś mi to $(this) tam nie pasuje i stad moje pytanie.

2

Po co tworzysz dodatkowy parametr clicked? Nie łatwiej to zrobić przy użyciu atrybutu disabled? Dla przycisku robisz taki kod:

stepsContainer.delegate('button.next_step', 'click', function () {
 $(this).attr("disabled", 1);
 self.gotoNextStep(this);
});

W funkcji gotoNextStep odblokowujesz przycisk przy użyciu $(target).attr("disabled", 0);

0

Hmm, sluszna uwaga, ale co z tym przekazywaniem $(this)? Rozumiem, ze jest to jak najbardziej poprawny zapis?

1

this jest referencją do obiektu DOM, zaś $(this) obiektem jQuery. $(this) waży więcej niż "goła" referencja do danego elementu. Ma to wpływ na ogólną wydajność aplikacji (oczywiście przy większych projektach). Tutaj możesz więcej poczytać na ten temat: http://stackoverflow.com/tags/jquery/info

Calling the jQuery function $() is expensive. Calling it repeatedly is extremely inefficient.

0

Wielkie dzięki za pełną odpowiedź.

0

Mam jeszcze jedno pytanie skoro już jesteśmy w tym temacie. Zrobiłem mały test i faktycznie wynik mnie mocno zdziwił.
http://jsfiddle.net/24aa32cd/1/

Czysty js zrobił to co miał zrobić w 3%-9% czasu jQuery. Czy w takim razie lepiej jest korzystać tam gdzie się da z czystego js'a? Czy przewartościować czas na napisanie od początku x funkcjonalności jQuery z benefitem jaki otrzymamy? Szczerze mowiac do tej pory tylko poznawałem js/jquery i nie przejmowalem sie wydajnoscia.

1

Są jeszcze inne frameworki, można też po prostu samemu napisać sobie takie pseudo-jQuery, które ułatwi korzystanie z "gołego" JS. Tylko tu musisz pamiętać o przeglądarkach, w których:
a) coś jest niekompatybilne/niezaimplementowane
b) gdzieś w specyficznych warunkach są bugi

Nigdy nie przyglądałem się dokładnie źródłom jQ, ale zawsze mnie dziwiło dlaczego jest AŻ TAK ciężkie.

Stronka w temacie:
http://vanilla-js.com/

1

Jeśli potrzebujesz javascript do małego zadania (max. 200 linii kodu) to nie ma sensu zaprzęgać frameworka. Nie chodzi tutaj tylko o to, że czysty javascript działa szybciej. jQuery waży ponad 80kB i jest to dodatkowe obciążenie dla przeglądarki podczas renderowania strony.

Jak jesteś zainteresowany tematem optymalizacji strony internetowej, zapraszam na naszego bloga: http://websplash.pl/blog/optymalizacja-stron-internetowych/

1 użytkowników online, w tym zalogowanych: 0, gości: 1