Question

I have a little problem with creating a new function from a string.
The example: I have a div, and some buttons. One of the buttons just make my div animating, nothing else. But the other button make the div animating and after the animation is complete, call a new function.

I have to handle the new, following function as a variable, because there will be a lot of function I have to call after the div animated.

Here is an example I made: http://jsfiddle.net/AmVSq/3/. I hope you can understand my problem.

I found the new Function(); in JavaScript but it just left me in doubt and the JS console did not log anything.

Can somebody tell me what am I doing wrong?
Thank you so much..

Answer 1

In JavaScript, functions are “first class” objects. This means you can assign them to variables and pass them to other functions as parameters.

There is no need to create a function from a string when you can pass the function name itself, like so:

<div><a href="javascript:void(0)" onclick="close_div( alert_me );">Close Div then do something</a></div>

and the script:

function close_div( next_function ) {
    $('#wrap').animate({ 'height': '-=100px' }, 300, function() {
        if ( next_function ) {
            // do the following function
            next_function();
        }
    });
}

— jsFiddle DEMO —

In fact, for your purposes, you can simply pass next_function right along to the animate function, like this:

function close_div( next_function ) {
    $('#wrap').animate({ 'height': '-=100px' }, 300, next_function);
}

There’s no need to check if next_function is undefined, because .animate will do that for you.