How would I do a callback on this?

Question

I've been watching some documentation, and I'm still confused.

I want to do a callback function on this:

$('.scroll-pane').jScrollPane();

Now the documentation shows this example

function fn1( value ){
    console.log( value );
}

How come the semicolon is at the end in my first example, and in the second the semicolon only seems to be at the end of another callback function as far as I can tell?

Thanks everyone :)

Answer 1

The semicolon in JavaScript is used to terminate a statement. Your first example is a statement (it calls the jScrollPane function on the object returned by the $('.scroll-pane') function call). Your second example is a function declaration, which is not terminated with a semicolon (nor are for loops, if blocks, etc.). Neither of your examples seems to have anything to do with callbacks, just calls.

Re your comment:

So how would I execute a statement after jScrollPane finishes?

Not sure what you mean by "finishes." Calling jScrollPane on an element just creates the pane (immediately). If you want to have the jScrollPane call you back when an event occurs, you bind to the event. For instance:

$('.scroll-pane').jScrollPane().bind('jsp-scroll-y', function(event) {
    // The "jsp-scroll-y" event fired on the element identified by `this`
});

That hooks up an anonymous function to be called when the event occurs. Or you can use a named function:

$('.scroll-pane').jScrollPane().bind('jsp-scroll-y', scrollHandler);

function scrollHandler(event) {
    // The "jsp-scroll-y" event fired on the element identified by `this`
}

(The function declaration doesn't have to be right there where the bind call is, in this case.)

More in the docs.

Answer 2

That first example is a call to a function that has already been defined (probably in a jQuery plugin). The second example is the function definition, which creates the function so it can be called in later code.