Why is this javascript function not defined?

Question

I have this javascript code:

$(function(){
  var currentCarouselItem = 1; //set carousel to first slide
  var runCarousel = 1;

  $(window).load(function(){    
    setTimeout('autoScroll()', 10000);
  });

  function autoScroll(num){
    if (runCarousel == 1) {
      $('.carouselItem.' + currentCarouselItem).animate({left: '975px'}, 'slow', function(){
        $(this).removeClass('active');
        $(this).attr('style','');
        var nextItem = currentCarouselItem + 1;
        if (nextItem == 7) {
            nextItem = 1;
        }
        $('.carouselItem.' + nextItem).animate({left: '110px'}, 'slow', function(){
          $(this).addClass('active');
        })
      })
    }   
  }
})

Whenever I run the site it throws a console error: Uncaught ReferenceError: autoScroll is not defined

Any idea why it thinks it is not defined?

Scope issue.. just put the function outside the `$(function()` and it will work. — Shadow The GPT Wizard, Jul 26 '11 at 21:01
possible duplicate of [JQuery, setTimeout not working.](http://stackoverflow.com/questions/1495903/jquery-settimeout-not-working) — jcolebrand, Jul 26 '11 at 21:26

score 4 · Accepted Answer · answered Jul 26 '11 at 21:02

4

setTimeout('autoScroll()', 10000);

Why put it in quotes?

setTimeout(autoScroll, 10000);

That's for starters.

Additionally, you have scoping issues here.

answered Jul 26 '11 at 21:02

jcolebrand

15,889
12
75
121

this is generally good practice, but won't change the behavior in this case – BrokenGlass Jul 26 '11 at 21:02

score 3 · Answer 2 · edited May 23 '17 at 12:26

3

I could try answering it for you, but I think this guy does a lot better job:

JQuery, setTimeout not working

edited May 23 '17 at 12:26

Community

1
1

answered Jul 26 '11 at 21:04

Marquis

531
1
4
13

1

Can't +1 you enough for this. – sorpigal Jul 26 '11 at 21:06
That sounds like "close as dupe" – jcolebrand Jul 26 '11 at 21:20

score 1 · Answer 3 · answered Jul 26 '11 at 21:04

I think this is because your autoScroll function is inside closure created by outermost $(function(){}). Therefore eval (used to evaluate your string in setTimeout) can't find it, as it runs in a 'global' scope.

You can move the definition of autoScroll outside.

Also, as jcolebrand suggested, remove quotes.

score 1 · Answer 4 · answered Jul 26 '11 at 21:04

I think it is because when you pass in a string as the first argument for setTimeout() that javascript basically runs eval() from the global scope on that string. autoScroll lives within the scope of $(function() { }) and therefore can't be "seen" from the global scope.

Try changing it to setTimeout(autoScroll, 10000);

score 1 · Answer 5 · answered Jul 26 '11 at 21:04

There a couple of problems with your code, but the reason that the autoScroll function is not defined is that it defined within the scope of your document ready function, but is executed via eval after the document ready has gone out of scope without the proper closure.

score 0 · Answer 6 · answered Jul 26 '11 at 21:02

$('.carouselItem.' + currentCarouselItem).animate({left: '975px'}, 'slow', function(){
                $(this).removeClass('active');
                $(this).attr('style','');
                var nextItem = currentCarouselItem + 1;
                if (nextItem == 7) {
                    nextItem = 1;
                }
                $('.carouselItem.' + nextItem).animate({left: '110px'}, 'slow', function(){
                    $(this).addClass('active');

                });
            });

For starters you need a semi colon at the end of functions like this,

Why is this javascript function not defined?

6 Answers6