javascript функция в рамките на функция не работи?

РЕДАКТИРАНЕ: нов проблем е, че въпреки че current_slide.showCurrentSlide(); е вътре във функцията hidePrevSlide, кодът showCurrentSLide се изпълнява преди анимацията в hidePrevSlide да е завършена.

Опитвам се да създам уебсайт, където ако щракнете върху ‹ li > тогава ‹ li > ще получи добавен клас към него. След това ще плъзне текущия видим екран нагоре и ще го скрие и след това ще покаже екрана, съответстващ на ‹ li > (например, ако ‹ li > е „начало“, тогава ще плъзне текущия съществуващ екран нагоре и ще го скрие и след това би трябвало да е екранът „#homeSlide“). Ето моят код.

$(document).ready(function(){

    hideItems(); //this function basically hides all the screens / slides.. The words 'screen' and 'slides' are interchangeable for the time being.

    $('#homeSlide').fadeIn(1000); //the default screen to be shown is the home screen
    $('#homeSlide').addClass('current'); //to signify that this is the current visible screen
    $('#home').addClass('clicked'); //#home is the <li>, so it adds the .clicked class to the <li>

    $('#sidebar ul a li').click(function(){ //loops through all <li>'s in the sidebar if an <li> is clicked
        var current_slide = $(this);
        $('#sidebar ul .clicked').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
        current_slide.addClass('clicked'); // add .clicked class to the clicked <li> ($(this))

        hidePrevSlide(function(){
            alert('enter showing step');
            current_slide.showCurrentSlide();
        });
    });
});

и ето моята функция hidePrevSlide.

function hidePrevSlide(){
    var test = $('.current').attr('id'); 
    test = "#" + test; // surrounds the id with a # and the word 'Slide'. This is the id of the screen which should slideUp
    $(test).slideUp( function () {
        $(test).hide();
        $(test).removeClass('current');
    });
alert('finished hiding step. Should enter showing step now');
};

Сега, когато стартирам кода, той казва „завършена стъпка на скриване“. Трябва да влезе в стъпката за показване сега“, но не казва „въведете стъпката за показване“, така че не влиза в стъпката, която трябва да се изпълни, след като функцията hidePrevSlide е готова. Как така?


person user2817200    schedule 13.10.2013    source източник
comment
hidePrevSlide никога не извиква функцията, която предавате като аргумент.   -  person Barmar    schedule 14.10.2013


Отговори (1)


hidePrevSlide трябва да извика функцията за обратно извикване.

function hidePrevSlide(callback){
    var test = $('.current');
    test.slideUp( function () {
        test.hide();
        test.removeClass('current');
    });
    alert('finished hiding step. Should enter showing step now');
    callback();
};

Премахнах и използването на $(test). Ако имате елемент, няма нужда да продължавате да го търсите по ID.

person Barmar    schedule 13.10.2013
comment
изчакайте обратно извикване(); какво точно да сложа? Тъй като поставянето на callback(); не работи, аз също се опитах да поставя current_slide.showCurrentSlide(); на мястото, където сте поставили callback(); но и това не проработи - person user2817200; 14.10.2013
comment
А, добре, замествам обратното извикване на аргумента с 'showCurrentSlide' без '()' след него и след това извиках функцията с '()', където вие извикахте обратно извикване.. добре, има смисъл. Въпреки това, по някаква причина той все още показва „текущия слайд“, преди дори да скрие предишния слайд, някаква идея защо? трябва ли да изпълни функцията за обратно извикване, след като hidePrevSlide завърши напълно изпълнението? Тъй като показва „текущия слайд“, преди предишният слайд да приключи с плъзгането нагоре. - person user2817200; 14.10.2013
comment
Анимацията е асинхронна. Така че всичко, което трябва да изчака, докато анимацията приключи, трябва да бъде във функцията, която предавате на test.slideUp. - person Barmar; 14.10.2013
comment
Не разбирам защо callback() не работи. Трябва да извика анонимната функция, която сте предали на hidePrevSlide(). - person Barmar; 14.10.2013
comment
Променихте function hidePrevSlide() на function hidePrevSlide(callback), нали? - person Barmar; 14.10.2013
comment
Добре, ето, проработи. И да, забравих да добавя обратното извикване като параметър и хм, добре, ще се опитам да поставя цялата функция showCurrentSlide във функцията, която предавам на test.slideUp. РЕДАКТИРАНЕ: но скрихPrevSlide(function() { current_slide.showCurrentSlide(); }); така че не трябва ли това вече да накара цялата функция showCurrentSlide и целия код във функцията showCurrentSlide да изчакат, докато анимацията на hidePrevSlide приключи? - person user2817200; 14.10.2013
comment
Дали ще изчака зависи от това къде сте поставили callback(). Ако го поставите в slideUp обратното извикване, той изчаква докато анимацията приключи. Ако го поставите извън това, той се изпълнява веднага след като стартирате анимацията. - person Barmar; 14.10.2013
comment
Когато извикате JS функция, която изпълнява асинхронни действия, като анимация или AJAX извиквания, функцията се връща веднага след като започне действието, а не чака то да завърши. - person Barmar; 14.10.2013