Jquery calling a callback function in a custom function

Question

I have a custom function and I want to add a callback function to it, i looked through the other questions but I couldn't really find the answer for my problem. So basically it looks like this:

function myfunction() {
 // something 
}

And I have a different function which I want to trigger as a callback, eventually i want to call myfunction like this:

myfunction(callback());

So can anyone please tell my the way to do this?

Solution 1

You would call it like this (passing the callback function as an argument):

 myfunction(myCallbackFn);

Notice that there are no parentheses after the function name when passing a reference to the function as an argument. This does not invoke the function, but just passes a reference to it which can then be called later from within your custom function.

You would define your function and then call the callback function in it like this:

function myfunction(cb) {
    cb(arg1, arg2);
}

Note, there are multiple methods of actually calling the callback function from within your custom function. If you just need to call it normally and don't care about the this argument, you can just use:

cb();

If you want to set the this argument to something, you can use this:

cb.call(thisArg, arg1, arg2);

If you want to pass along your current arguments or pass an array of arguments and set the this argument, you would use this:

cb.apply(thisArg, argArray);

References on .call() and .apply().

---

Your current code has a javascript error in this area:

test(rand_gyumolcs, link, callback){
    callback();
}; 

This is not legal javascript. I don't know what you're trying to do, but this looks like half of a function declaration and half of a function call. If you just want to call the test function, you would just use this:

test(rand_gyumolcs, link, callback);

Inside of test, if you want the callback function to be called after the animation is complete, then you would have to hook the completion function of the animation and call the callback then.

Solution 2

Here's an example with a callback with a return value that's also taking input parameters:

function test2(arg1, arg2, callback) {
  var result = callback(arg1, arg2);

  alert('arg1=' + arg1 + ', arg2=' + arg2 + ', result=' + result);
}

test2(1, 2, function(a, b) { return a + b; });

Solution 3

function myfunction(callback) {
 // something

 callback();
}

myfunction(callback);

notice I am not invoking the callback but just passing it as a function reference to my function. I then invoke it IN the function at the end or wherever you want to do it.

Comments

[Mr. Sam]

Doesn't seem to work for me jfriend00 ... it's probably my mistake, but could you maybe take a look? The code is a bit messy i know, i'm not that good at jquery... ridewithus.co.cc/test

[Mr. Sam]

if you can see.. i want the fruits on the right side to move, and the test function does that, but i also have a callback funtion which should move them back the their original position

[jfriend00]

Please post the relevant code in your original question or give a very specific description of where the code is in your page and how one triggers it. You've posted a web page with five embedded script pages and I have no idea what piece of code you're asking about.

[Mr. Sam]

Your right, i'm sorry, but the code is kind of long to post it, thanks anyway....

[jfriend00]

I added some comments on your current code to the end of my answer.

[Mr. Sam]

I dont understand 100% what you mean by hook, but yes, thats what i want to do, i want the callback function to be called after the animation(test function) is complete. Could you please help me with this... thank you very much

[jfriend00]

The ONLY place you can call something after your animation is complete is by using the completion function for the animation. Look at the doc for the jQuery animate function and you will see that the last argument is a callback function that will be called when the animation is complete. You need to provide that callback function to your gyum_mozgas2 function as an argument and then pass it to the .animate() call in that function. The animate() function will then call it when the animation completes.

[bouk]

@Keith...You need to pass the actual function that you need to run when you declare myfunction: i.e. myfunction(function(){ alert "hello";}); not myfunction(callback);