Avoiding repeat code in jQuery

Question

I currently have the following code.

to get the #headerfader to resume running after the second function runs (hovering over and off again to reset the fading text)

I've duplicated the code inside the function.

Is there a more elegant way of handling this?

//FADER TEXT
        $('#headerFader').carousel({
            interval: 2500,
            pause: false
        });

        //BACK HOME TEXT
       $('#headerText').hover(
           function(){
               $(this).find("h1#masterHeader").animate({opacity:0}, 0, function(){
                   $(this).css("display", "none");
                   $('#headerText').find("h1#takemeback").css("display", "block");
                   $('#headerText').find("h1#takemeback").animate({opacity:1,});
               });
           },
           function(){
               $(this).find("h1#takemeback").animate({opacity:0}, 0, function(){
                   $(this).css("display", "none");
                   $('#headerText').find("h1#masterHeader").css("display", "block");
                   $('#headerText').find("h1#masterHeader").animate({opacity:1,});
                   //FADER TEXT
                    $('#headerFader').carousel({
                        interval: 2500,
                        pause: false
                    });

               });
           }
       );

Code duplication can be avoided by moving the duplicate code into its own function and call that function instead. To learn more about functions, have a look at the MDN JavaScript guide: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions — Felix Kling
– Felix Kling, Commented Mar 19, 2015 at 16:17
Also, you should seriously consider caching your jQuery objects into a variable. — Sterling Archer
– Sterling Archer, Commented Mar 19, 2015 at 16:18
This is code I've inherited from another developer, I'm currently attempting to fix bugs and improve the code as I go along. Cheers. — Alex
– Alex, Commented Mar 19, 2015 at 16:20
@SterlingArcher to be fair, recent versions of JQuery mitigate performance issues now by caching your selectors internally. However you still do have nanoseconds of overhead for having to make the function call in the first place, but it's definitely not the performance bottleneck it used to be. — ChevCast
– ChevCast, Commented Mar 19, 2015 at 16:24

Piotr Dajlido · Accepted Answer · 2015-03-19 17:52:21Z

3

This is a complex solution to this problem, which minimizes the numbers of jQuery element fetching calls

Note that it's clean and a lot faster than the other solutions provided. Unless it's tested I believe that this is a working piece of code.

Since you are using # div id selector (which is unique) the is no need for calling find() function.

//Object handles
var headerFader  = $('#headerFader');
var masterHeader = $('#masterHeader');
var takemeback   = $('#takemeback');

headerFader.carousel({
    interval: 2500,
    pause: false
});

//BACK HOME TEXT
headerFader.hover(
    function(){
        masterHeader.animate({opacity:0}, 0, function(){
            $(this).css("display", "none");
            takemeback.css("display", "block").animate({opacity:1}, 1000);
        });
    },
    function(){
        takemeback.animate({opacity:0}, 0, function(){
            $(this).css("display", "none");
            masterHeader.css("display", "block").animate({opacity:1}, 1000);
            headerFader.carousel({
                interval: 2500,
                pause: false
            });
        });
    }
);

edited Mar 19, 2015 at 17:52

answered Mar 19, 2015 at 16:33

Piotr Dajlido

2,04017 silver badges28 bronze badges

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

5 Comments

ChevCast Over a year ago

"Unless it's tested I believe that this is a working piece of code." Story of my life.

Piotr Dajlido Over a year ago

Force author to provide html code along with css and my WebStorm is ready to fire. This is a very good solution + programming practice lesson. Your comment is unfair to me.

Piotr Dajlido Over a year ago

Yeah, sorry I got frustrated over this one, it was already marked as solved with solution that had 3 major errors, later some guys provided some twisted solutions that forced me to fix it once and for all.

ChevCast Over a year ago

I was just joking about the way you structured your grammar, making it sound like "This code works, unless you test it." And I was saying that is the story of my life :P Your solution is fine :)

Alex Over a year ago

Yeah sorry, I would have provided the html / css but I'm new to MVC so I had no idea where the code was. I'll plug it in on Monday and get it working.

isherwood · Accepted Answer · 2015-03-19 16:21:28Z

2

Outside your other functions, you'd do this:

function showHeader(el) {
    $(el).css("display", "none");
    $('#headerText').find("h1#takemeback").css("display", "block");
    $('#headerText').find("h1#takemeback").animate({opacity:1,});
}

Then, inside your hover functions, call it:

showHeader(this);

Along with the variable suggestion above, you can chain your statements:

$('#headerText').find("h1#takemeback").css("display", "block").animate({opacity:1,});

Also, #takemeback should be unique, so this would do:

$("#takemeback").css("display", "block").animate({opacity:1,});

answered Mar 19, 2015 at 16:21

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

6 Comments

Alex Over a year ago

Cheers, thank you. I was also wondering about the $('#headerFader').carousel({ interval: 2500, pause: false }); Would it be worth it to stick that as it's own function too?

isherwood Over a year ago

Purists would tell you to abstract nearly everything that can be. So, yes. :)

Piotr Dajlido Over a year ago

This is not 100% valid, you still REPEAT the $( ) and find( ) call.

Piotr Dajlido Over a year ago

Still not valid in his particular example.. I don't know who marked it as solve, it's miss leading.

Piotr Dajlido Over a year ago

How do you handle "h1#masterHeader" and "h1#takemeback" differentiation in hover( inFunc, outFunc ) ?

|

Collectives™ on Stack Overflow

Avoiding repeat code in jQuery

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related