method not defined

Question

(function($){
    $.fn.slideshow = function(){

        function init(obj){

            setInterval("startShow()", 3000);           
        }               

        function startShow(){
            alert('h');
        }
        return this.each(function(){                    
            init(this);
        });

    }
})(jQuery);

i am getting error

startShow is not defined

Answer 1

Change

setInterval("startShow()", 3000);            

To

setInterval(startShow, 3000);            

When you pass a string to setInterval(), the code inside is executed outside of the current scope. It's much more appropriate to just pass the function anyway. Functions can be passed around just like any other variable if you leave the parenthesis off.

If you need to pass a variable, you can use a solution similar to the one Guffa provided:

setInterval(function () { startShow(myVar); }, 3000);

This creates an anonymous function to be passed as the first argument to setInterval(), and within that anonymous function you have access to variables and functions further up the scope chain.

Answer 2

The startShow function is local to the scope, so when the setInterval method evaluates the string in the global scope, it won't find the function.

Use an anonymous function instead of the string:

setInterval(function(){ startShow(); }, 3000);

As the anonymous function use the locally declared function, a closure is created so that the function still has access to it.

Answer 3

 function startShow()
 {
        alert('h');
 }    
(function($){
        $.fn.slideshow = function(){

            function init(obj){

                setInterval("startShow()", 3000);           
            }               


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

        }
    })(jQuery);

Answer 4

Passing a string to setInterval/setTimeout makes it run an eval() in the background. The function scope is lost in this eval and requires a global reference. Avoid the use of strings in setInterval/setTimeout , it's never needed and causes ambuigity.

(function($){
    $.fn.slideshow = function(){

        var init = function(obj){
            setInterval(startShow, 3000);           
        }               

        var startShow = function(){
            alert('h');
        }

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

    }
})(jQuery);

Answer 5

Your setting the time-out to look in the base scope, you need to create an anonymous function in the

Try the following:

(function($){
    $.fn.slideshow = function(){

        function init(obj){

            setInterval(function(){
                startShow();
            }, 3000);           
        }

        function startShow(){
           //Deprecated 
        }


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

    }
})(jQuery);

Or you can create an object to hold your methods in:

(function($){
    $.fn.slideshow = function(){

        var Functions = {
            startShow : function(obj)
            {
                alert('Starting Show')
            }
        }

        function init(obj){

            setInterval(function(){
                 Functions.startShow(obj)
            }, 3000);           
        }

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

    }
})(jQuery);

Answer 6

This isn't directly relevant to your problem, but if you take a look at this page, you'll notice the best practices when creating your plugins methods:

http://docs.jquery.com/Plugins/Authoring

This is just an example:

(function( $ ){

  var methods = {
    init : function( options ) {
      setInterval(startShow(), 3000);
    },
    startShow : function( ) { 
      alert('h');
    }
  };

  $.fn.slideshow = 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.tooltip' );
    }    

  };

})( jQuery );