I'm trying to create my own jquery function, I know how to add options but don't know how to add 'onStart' or 'onComplete' functionality.

this is what I know so far:

jQuery.somefunctionname = function (options) {
var settings = {},
    defaults = {
        'someoption': 'somevalue',
        'someoption2': 'somevalue2',
        'someoption3': 'somevalue3'
    }
settings = $.extend({}, defaults, options);

    //do something functional
    alert("hey i'm a function");
}

But If I want the user to be able to add their own code in before (onStart) and after (onComplete) my function, what should I code?

User should be able to write like this:

$.somefunctionname({
   'someoption' : 'a',
   'someoption2' : 'b',
   'someoption3' : 'c',

   'onStart' : function() {
      //whatever user want when my function started
   },
   'onComplete' : function() {
      //whatever user want when my function ended
   } });

thx ;)

I'm trying to create my own jquery function, I know how to add options but don't know how to add 'onStart' or 'onComplete' functionality.

this is what I know so far:

jQuery.somefunctionname = function (options) {
var settings = {},
    defaults = {
        'someoption': 'somevalue',
        'someoption2': 'somevalue2',
        'someoption3': 'somevalue3'
    }
settings = $.extend({}, defaults, options);

    //do something functional
    alert("hey i'm a function");
}

But If I want the user to be able to add their own code in before (onStart) and after (onComplete) my function, what should I code?

User should be able to write like this:

$.somefunctionname({
   'someoption' : 'a',
   'someoption2' : 'b',
   'someoption3' : 'c',

   'onStart' : function() {
      //whatever user want when my function started
   },
   'onComplete' : function() {
      //whatever user want when my function ended
   } });

thx ;)

• javascript
• jquery

2 Answers 2

Within your function, do something like this:

jQuery.somefunctionname = function (options) {
   if (typeof options.onStart === "function")
      options.onStart.call(this);

   // other function code here

   if (typeof options.onComplete === "function")
      options.onComplete();
      // OR
      options.onComplete.call(this);
      // OR
      options.onComplete.apply(this, argsArrayIfDesired);
      // etc.
};

That is, if the property is defined in options and actually is a function then call it at the appropriate point. Specify a setting for this using .call() or .apply() if desired, and include any parameters. Integrate with your settings object or not as desired.

Simply have a default value for those settings of jQuery.noop, and then you can know that it is safe to call the value of that setting as a function, using apply() or similar.

e.g.

jQuery.somefunctionname = function (options) {
var settings = {},
    defaults = {
        'someoption': 'somevalue',
        'someoption2': 'somevalue2',
        'someoption3': 'somevalue3',
        'onStart': jQuery.noop,
        'onComplete': jQuery.noop
    }
settings = $.extend({}, defaults, options);

    settings.onStart.apply(this);

    //do something functional
    alert("hey i'm a function");

    settings.onComplete.apply(this);
}