Convert String to Function in Javascript

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..

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

jackwanders · Accepted Answer · 2012-08-30 17:24:16Z

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.

edited Aug 30, 2012 at 17:24

answered Aug 30, 2012 at 17:06

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

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

3 Comments

b_benjamin Over a year ago

Oh, I understand. I handle the following as a string (with putting it between apostrophes) and not as a real function. Thank you very much, it works.

jackwanders Over a year ago

No problem @b_benjamin. See my edit for how to shorten your code even further.

b_benjamin Over a year ago

Hmm, it looks like more accurate. Thanks a lot!

Ry- · Accepted Answer · 2012-08-30 17:05:03Z

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.net/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 complete' );
}

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

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

Karoly Horvath · Accepted Answer · 2012-08-30 17:04:32Z

1

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

answered Aug 30, 2012 at 17:04

Karoly Horvath

96.7k11 gold badges123 silver badges181 bronze badges

Comments

user462356 · Accepted Answer · 2012-08-30 17:04:56Z

1

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

answered Aug 30, 2012 at 17:04

user462356

1 Comment

b_benjamin Over a year ago

I understand this is kinda like @jackwanders wrote down in the following reply but it just does not work for me. I double-checked everything.

Collectives™ on Stack Overflow

Convert String to Function in Javascript

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related