CODEWITHSUNDEEP
javascriptjquery
R_User
R_User

Reputation: 11082

Is there a difference in chaining functions and using callback functions in jQuery?

Is there a difference in chaining functions (e.g. $('#id').function1().function2();) and using functions as a callback-function (e.g. $('#id').function1(function2());)?

For example the following code does (to me) exactly the same thing when either clicking on div#nr1 or div#nr2, only that using the callback-function is much more verbose:

<html>
<head>
<title>PageTitle</title>
<style>
div#nr1,
div#nr2 {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

</style>
</head>
<body>

<div id="nr1">A</div>
<br />
<div id="nr2">B</div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {

$("#nr1").click(
    function() {
        $(this).fadeToggle(1000).fadeToggle(1000);
    });

$("#nr2").click(
    function() {
        $(this).fadeToggle(1000, function() {
            $(this).fadeToggle(1000);
        });
    });

});
</script>
</body>
</html>

When is it recommended to use one or the other method?

Upvotes: 0

Views: 665

Answers (2)

Arkantos
Arkantos

Reputation: 6608

Chaining and callbacks are two different things altogether.

Usually, you need some object reference to call methods on it, instead of using objectRef.method1() and then objectRef.method2(), we just return objectRef as the return result of method1 execution, now that we have the reference back we can call other methods on it like this objectRef.method1().method2(). It simply reduces verbosity.

Callbacks/Event Handlers are anonymous/named functions we pass to respond to some event.

Coming to your example,

$(this).fadeToggle(1000, function() {
    $(this).fadeToggle(1000);
});

Here you're just animating some element that spans for 1000ms and once that animation is complete, your callback will be invoked. Here again you're animating that element for 1000ms.

If you just want to pipeline your animations, use chaining but if want to do something after your animation, use callbacks.

Upvotes: 1

ali404
ali404

Reputation: 1153

There is a big difference between these two methods. In your example there is no difference becouse you want to execute the method on the same object.

I will begin with the similarities. Both methods are invoked after the previous methods are done.(nothing new here).

The first method, method chaining usually makes all the changes on the object passed to that function, so if you have 

$('.my-class').method1().method2();

method1() and method2() execute on the DOM objects $('.my-class') , changing something on them (and of course , are returning this , so that they can be chained ). If you notice, at the beggining i said 'usually' , that is becouse chained methods can manipulate other objects, not neccesarily the object which they were passed (but this is an odd behaviour for chainable functions).

The second method, callbacks, is useless if you want the callback to manipulate the same object $(this) , like in your code. If you use callback with the purpose of the chainable methods, your code will not be so readable. Usually callback methods are used if you want at the end of a function to execute some stuff on other objects , like this :

$('.my-class').method1(function(){
    $('#my-id').method2();
});

For example the animate method has both practices integrated in it. if you want the same animation to manipulate the previous object, than chain them, but if you want a variable to be changed at the end of the function, callback it.

Upvotes: 2

Related Questions