jQuery UI Widget not able to find enclosed function

Question

I am trying to create a simple progress widget. But I'm getting _showProgress is not a function error again and again.

(function ($, undefined) {
    $.widget("AOne.ProgressBar", {

        options: { max: 100, min: 0, current: 0, time: 1000, stepWidth: 1 },

        innerDiv: $("<div></div>").css({ overflow: 'hidden', clear: 'both', 
                        height: '10px', width: '0px', 
                        background: 'transparent url("Progress.gif") repeat-x 
                        scroll left center' }).html("&nbsp;"),

        _create: function () {
            this.element.append(this.innerDiv);
            maxWidth = this.element.outerWidth();
            this.options.stepWidth = maxWidth / this.options.max;
        },

        _init: function () {
            this.intervalId = setInterval(function () {
                this._showProgress();
            },
            this.options.time);
        },

        _showProgress: function () {
            this.options.current += 1;

            if (this.options.current < this.options.max) {
                this.innerDiv.css({ width: this.options.stepWidth * 
                                                this.options.current + 'px' });
            } else {
                window.clearInterval(this.intervalId);
            }
        },

        _setOption: function (key, value) {
            $.Widget.prototype._setOption.apply(this, arguments);
        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

Answer 1

Could it be a matter of scope? Try this:

_init: function () {
    that = this;
    this.intervalId = setInterval(function () {
        that._showProgress();
    },
    this.options.time);
},