Функция 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). Если у вас есть элемент, нет необходимости искать его по идентификатору.

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. РЕДАКТИРОВАТЬ: но я сделал hidePrevSlide(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