Javascript calling a function within a function

Question

I'm using a jquery plugin for a slider. It contains a pauseSlide function which I am trying to call from outside. Here is the plugin:

(function ($) {
    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        function pauseSlide() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };   

})(jQuery);

Outside of this I am using $.liteSlider.pause(); which displays the alert but it doesn't run the pauseSlide() function. Any suggestions?

Possibly a scope issue? Try putting the functions outside of the (function ($) { and see if it helps. — showdev
– showdev, Commented Apr 16, 2013 at 23:29

Flo Schild · Accepted Answer · 2013-04-16 23:57:04Z

Regarding the plugins authoring of jQuery, especially the namespacing point: http://docs.jquery.com/Plugins/Authoring#Namespacing

[...] you should collect all of your plugin's methods in an object literal and call them by passing the string name of the method to the plugin. [...]

(function($) {
    var YourPluginMethods = {
        init: function (options) {
            return this.each(function () {

            });
        },
        pauseSlide : function(options) {
            return this.each(function () {
                // Do some stuff for each instance of your plugin here
            });
        }
    };

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

$('your-selector').YourPlugin('pauseSlide', {
    speed: 'slow'
});

Once you have declared your methods this way, your can call it on any HTML selector.

Benjamin · Accepted Answer · 2013-04-16 23:29:52Z

pauseSlide is out of scope. An easy way around this might be to declare var pauseSlide; somewhere in scope, then assign it later.

(function ($) {
    var pauseSlide;

    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        pauseSlide = function() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };

While this may work it's a maintainability nightmare. What happens when you need to call playSlide() outside the scope, well go ahead and declare that outside too. But what about autoplay(). While it may not be applicable to this problem, it's applicable in other situations. This is a band-aid, not a cure.

Morgan ARR Allen · Accepted Answer · 2013-04-16 23:29:31Z

0

The problem is that the call to pauseSlide is not in the same scope as the declaration.

answered Apr 16, 2013 at 23:29

Morgan ARR Allen

10.7k3 gold badges38 silver badges33 bronze badges

Collectives™ on Stack Overflow

Javascript calling a function within a function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related