Wondering if there is a way to combine identical code of 2 separate functions into 1 function.

In my case:

jQuery('body').on('click', '.some_div', function (e) {
    // Long and fancy code
});

jQuery(window).resize(function () {
    // Do the same fancy stuff (identical code)
});

Wondering if there is a way to combine identical code of 2 separate functions into 1 function.

In my case:

jQuery('body').on('click', '.some_div', function (e) {
    // Long and fancy code
});

jQuery(window).resize(function () {
    // Do the same fancy stuff (identical code)
});

• javascript
• jquery

• 2 Also keep in mind that the resize function might slow down your client's brwoser / make resizing laggy laggy, see this reference on how to prevent that. – Clemens Himmer Commented Dec 23, 2015 at 9:18

4 Answers 4

You can define a single function which you call under both events:

function doSomething(e) {
    console.log('Your code here...');
}

jQuery('body').on('click', '.some_div', doSomething);
jQuery(window).resize(doSomething);

Bear in mind that the reference to this will be different depending on the event raised, should that be used within your doSomething function.

You can create a function to handler both the events and pass this function reference to the event handlers.

function myHandler(e) {
    // Long and fancy code
}

jQuery('body').on('click', '.some_div', myHandler);

jQuery(window).resize(myHandler);

There's another way to do that.

jQuery('body').on('click', '.some_div', function (e) {
    // Long and fancy code
});

jQuery(window).resize(function () {
    $('.some_div').trigger('click')
});

create a separate function and call it from required locations:

jQuery('body').on('click', '.some_div', function(e){
    myFunction();
});


jQuery(window).resize(function() {
    myFunction();
});

function myFunction(){
   // Long and fancy code
}