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 plete, 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: /. 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..

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 plete, 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/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..

• javascript
• function

• 1 Don't mix JavaScript and HTML. You're already using jQuery, bind events using on or bind. – zzzzBov Commented Aug 30, 2012 at 17:05

4 Answers 4

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.

What you're doing wrong is using new Function at all. The correct way is to just pass the function, which are objects like anything else in JavaScript:

http://jsfiddle/minitech/AmVSq/6/

<div><a href="javascript:void(0)" onclick="close_div();">Close Div</a></div>
<div><a href="javascript:void(0)" onclick="close_div(alert_me);">Close Div then do something</a></div>
<div><a href="javascript:void(0)" onclick="close_div(confirm_me);">Close Div then do another thing</a></div>
<div id="wrap"></div>​

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

function alert_me() {
    alert( 'The animation is plete' );
}

function confirm_me() {
    confirm('Are you sure?');
}

Or, more concisely, $('#wrap').animate({height: '-100px'}, 300, next_function);.

The chrome console displays the result properly:

> f = new Function("alert('hello');");
function anonymous() {
  alert('hello');
}
> f(); //executes it.

But using string to create function, or passing strings to functions to execute it is really bad practice.

function test(callback) {
    callback();
}

test(function() { alert("hello"); });

You don't need to make the function into a string, you can pass functions as arguments to other functions in Javascript.

For example:

function get_message1() {
    return "hello world";
}

function get_message2() {
    return "yay for first-class functions";
}

function print_message(message_func) {
    console.log(message_func())
}

print_message(get_message1);
print_message(get_message2);