javascript function within a function not working?

Question

EDIT: new problem is that even though current_slide.showCurrentSlide(); function is inside the hidePrevSlide function, the showCurrentSLide code is executing before the animation in hidePrevSlide is finished.

I am trying to create a website where if you click an < li > then the < li > will get a class added to it. It will then slide the current visible screen up and hide it and then show the screen corresponding to the < li > (for example, if the < li > is 'home' then it will slide the current existing screen up and hide it and then it would should the '#homeSlide' screen). Here is my code.

$(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();
        });
    });
});

and here is my hidePrevSlide function.

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');
};

Now, when I run the code, it does say 'finished hiding step. Should enter showing step now' but it does not say 'enter showing step' so it doesnt enter the step which should be executed after the hidePrevSlide function is done. How come?

hidePrevSlide never calls the function that you're passing as an argument. — Barmar
– Barmar, Commented Oct 13, 2013 at 21:11

Barmar · Accepted Answer · 2013-10-13 21:15:08Z

2

hidePrevSlide needs to call the callback function.

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

I also removed the use of $(test). If you have an element, there's no need to keep searching for it by ID.

answered Oct 13, 2013 at 21:15

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2817200 Over a year ago

wait, for callback(); what exactly am I supposed to put? Because putting callback(); didn't work, I also tried putting current_slide.showCurrentSlide(); in place of where you put callback(); but that also didn't work

Barmar Over a year ago

Animation is asynchronous. So anything that should wait until the animation is finished should be in the function that you pass to test.slideUp.

Barmar Over a year ago

You changed function hidePrevSlide() to function hidePrevSlide(callback), didn't you?

Barmar Over a year ago

Whether it waits depends on where you put callback(). If you put it inside the slideUp callback, it waits until the animation is finished. If you put it outside that, it runs right after you start the animation.

Barmar Over a year ago

When you call a JS function that performs asynchronous actions, like animation or AJAX calls, the function returns immediately after it starts the action, it doesn't wait for it to finish.

|

Collectives™ on Stack Overflow

javascript function within a function not working?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related