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..
Share Improve this question asked Aug 30, 2012 at 17:02 b_benjaminb_benjamin 2541 gold badge8 silver badges19 bronze badges 1-
1
Don't mix JavaScript and HTML. You're already using jQuery, bind events using
on
orbind
. – zzzzBov Commented Aug 30, 2012 at 17:05
4 Answers
Reset to default 4In 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);