combine multiple functions with same code in jquery

Question

Yes, I have thoroughly searched google and did not find anything that suits my requirement.

The code i have so far is at the link below:

There are multiple onchange events which call almost the same code, i would like to combine them maybe in a comma separated fashion to call it only once. something like this

   (on1Change, on2Change, on3Change): function () {
       this.loadData();
     }

is this possible??

Note: these functions are bound to the controls via a framework over which i do not have control, i need to create these functions and the framework would bind these to the respective controls

if all are doing the same then why don't you make just one function and call tthat instead... onChange:function(){ this.loadData(); } and call it whereever you want... instead of creating on1Change , on2Change..... — bipen
– bipen, Commented Nov 8, 2013 at 9:28
these functions are bound to the controls via a framework over which i do not have control, i need to create these function and the framework would bind these to the respective controls.. plz have a look at the link jsfiddle.net/ZKwTY/4 — Angela Costa
– Angela Costa, Commented Nov 8, 2013 at 9:30

Ranjit Swain · Accepted Answer · 2014-06-20 13:08:40Z

1

or you can create your object like this

var ol = {
on1Change: this.loadData,
on2Change: this.loadData,
on3Change: this.loadData,
on4Change: this.loadData,

loadData: function () {
    this.loadData1();
    this.loadData2();
},

loadData1: function () {
    alert('hi from loadData1');
},

loadData2: function () {
    alert('hi from loadData2');
}
};

Then if you want to do it once, then declare a object

var ol = {
    loadData: function () {
        this.loadData1();
        this.loadData2();
    },

    loadData1: function () {
        alert('hi from loadData1');
    },

    loadData2: function () {
        alert('hi from loadData2');
    }
};// end of object

ol.on1Change = ol.on2Change = ol.on3Change = ol.on4Change = ol.loadData;

add all propteries dynamically after object declaration

edited Jun 20, 2014 at 13:08

answered Nov 8, 2013 at 10:51

Ranjit Swain

3092 silver badges12 bronze badges

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

2 Comments

Angela Costa Over a year ago

ur close.. but instead of ********************** on1Change: this.loadData, on2Change: this.loadData, on3Change: this.loadData, on4Change: this.loadData, ********************** can we have something like ********** on1Change,on2Change,on3Change,on4Change: this.loadData, ************** bcoz we are having the call to this.loadData 4 times.. i would prefer to have it only once... note: there are 12 onchange functions in my code which point to this.loadData

Ranjit Swain Over a year ago

The previous code will work which is the second choice.

Rituraj ratan · Accepted Answer · 2013-11-08 09:21:18Z

0

use bind()

$("selector").bind(on1Change, on2Change, on3Change): function () {
        this.loadData();
  }.....

answered Nov 8, 2013 at 9:21

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

1 Comment

Angela Costa Over a year ago

thanks Rituraj, but i do not have any selector, these are callbacks created by a framework over which i do not have control, if you look at the code here jsfiddle.net/ZKwTY/4 you would be able to understand more

Grundy · Accepted Answer · 2013-11-08 12:32:16Z

0

you can try somethig like this http://jsfiddle.net/s4VVY/ i.e. add methods after object create

[1,2,3,4,5].forEach(function(it){ol["on"+it+"Change"] = function(){this.loadData()}})

UPDATE
may be this help

var ol = (function(){
    var o = {
        loadData: function () {
            this.loadData1();
            this.loadData2();
        },

        loadData1: function () {
            alert('hi from loadData1');
        },

        loadData2: function () {
            alert('hi from loadData2');
        }
    }
    o.on1Change=o.on2Change=o.on3Change=o.on4Change=function(){ this.loadData();};

    return o;
})()

also you can make function bindFunc

function bindFunc(){
    var obj = arguments[0],
        handler = arguments[1],
        properties = Array.prototype.slice.call(arguments,2);

    for(var i in properties){
        obj[properties[i]] = handler;
    }
}

and call as

bindFunc(o,function(){this.loadData();},"on1Change","on2Change","on3Change","on4Change")

edited Nov 8, 2013 at 12:32

answered Nov 8, 2013 at 10:07

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

4 Comments

Angela Costa Over a year ago

thanks Grundy.... but this is how the framework is assigning the functions to the controls, i cannot touch the framework code, thereby i hav to create those functions , but would like to remove the repetitive code and just write the function call once..

Grundy Over a year ago

in your sample ol object it's a framework object? if no then when you add properties you don't touch framework code

Angela Costa Over a year ago

ol is not a framework object, its a local object, the framework takes a list of controls, populates the data and creates the callback function which will point to the function that are listed here.. so 1,2,3,4.. will be the controls, and the callback functions would be created as on1change, on2change etc.. most of these function will have almost the same code, while a couple will have different logic within them.. so i want to combine the callbacks which hav the same code in just 1 line.. for e.g. on1Change,on2Change,on3Change,on4Change: this.loadData

Grundy Over a year ago

ol.on1Change=ol.on2Change=ol.on3Change=ol.on4Change = ol.loadData - is code in just 1 line

Collectives™ on Stack Overflow

combine multiple functions with same code in jquery

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related