Question

Hello everyone.

I am trying to develop a Jquery plugin following the steps I found in http://docs.jquery.com/Plugins/Authoring and I seem to have problems reaching the caller object (the “this” variable) inside the options passed to the plugin. It is a plugin that I just want to use to make a button have a “blink” effect.

I would like to be able to pass the functions to execute in “show/hide” (or link blink-on, blink-off, if you prefer) as an option for the plugin. Let’s say the user wants to achieve the “blinking” effect by hiding/showing the whole button every 1000 milliseconds. Then I would like the options to be something like:

$("#bttnOk").myBlinker ({
    blinkHide: function(){$(this).hide();},
    blinkShow: function(){ $(this).show();},
    interval:1000
});
// … //
// And to make it actually blink:
$("#bttnOk").myBlinker ("blink");

Or let’s say that the user wants to move the button up and down applying an inline css sytle every 200ms. Then the options would something like:

$("#bttnOk").myBlinker ({
    blinkHide: function(){$(this).css(“margin-top: 10px”);},
    blinkShow: function(){ $(this).css(“margin-top: 0px”);},
    interval:200
});

The problem is that I seem to lose the reference to “$(this)” when I am inside the options. When the plugin reaches the blinkHide/blinkShow functions, “this” is the whole DOM window, not the button $(“#bttnOk”) my “myBlinker” plugin is attached to.

This is the first Jquery plugin I’m trying to write so I’m not even sure if there’s a way to achieve what I’m trying to do.

My plugin code follows the following structure:

(function($){
    var defaultOptions = {
        interval: 500
    }

    var methods = {
        init : function( options ) {
            return this.each(function(){
                this.options = {}
                $.extend(this.options, defaultOptions, options);
                var $this = $(this);
                var data = $this.data('myBlinker');

                // If the plugin hasn't been initialized yet
                if ( ! data ) {
                    $this.data('myBlinker', {
                        on : true
                    });
                }
            });
        },
        destroy : function( ) { // Some code here},
        blink: function ( ){
            console.log("Blinking!. This: " + this);
            var current = 0;
            var button=this.get(0);
            setInterval(function() {
                if (current == 0){
                    button.options["blinkShow"].call(this);
                    current=1;
                } else {
                    button.options["blinkHide"].call(this);
                    current=0;
                }
            }, button.options["interval"]);
        }

    };

    $.fn. myBlinker = function( method ) {
        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myBlinker ' );
            return null;
        }
    };
})(jQuery);

Any idea, correction, link or tip will be appreciated.

Thank you.

Answer 1

Within the setInterval function, this is the global object, not the current element DOMElement like in the blink function.

A solution to that is to save a reference of this and use this saved reference in the setInterval:

   blink: function ( ){

        // save a reference of 'this'
        var that = this;

        setInterval(function() {

            // use the saved reference instead of 'this'
            button.options["blinkShow"].call(that);

        }, button.options["interval"]);
    }

DEMO