Closure/scope JavaScript/jQuery

Question

I'm trying to group some exisiting top-level functions inside a closure (to avoid polluting the global namespace) but I'm not quite getting it to work.

First, all the JS works outside my anonymous function, but once I put it in the anonymous function I get an error of "crossfade is not defined". Does anyone see anything completely obvious that I am missing?

I'm not quite getting why the the setInterval/crossfade works outside the anonymous function but not inside. Anything inside start() should be able to see vars/functions outside start() and it should all be protected in the closure created by the top-level anonymous function? I'm not trying to access anything within crossfade(), I'm just trying to execute it.

(function($) {

    //vars up here that internal functions can access
    //also using some jquery inside here, so using $

    function crossfade() {
        //body here
    }

    //other functions

    function start() {
        //body here

         cInterval = setInterval('crossfade()', 5000);
    } 

})(jQuery);

Greg · Accepted Answer · 2009-11-24 19:00:33Z

8

Using setInterval('crossfade()', 5000); doesn't create a closure - it creates a string to be eval()d. You should use a function instead:

setInterval(function() { crossfade(); }, 5000);

answered Nov 24, 2009 at 19:00

Greg

323k55 gold badges378 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nosredna Over a year ago

I'd use setInterval(crossfade,5000);

Guffa · Accepted Answer · 2009-11-24 19:03:40Z

7

The setInterval method will be run in the scope of the window, so the crossfade function doesn't exist there. You have to make an anonymous function so that a closure is created that contains a reference to the function:

cInterval = window.setInterval(function() { crossfade(); }, 5000);

answered Nov 24, 2009 at 19:03

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

mtyaka · Accepted Answer · 2009-11-24 19:09:12Z

2

When setInterval is passed a string, the string is evaluated in global scope. That explains why crossfade is not visible when setInterval fires.

setInterval can also be passed a function reference:

setInterval(crossfade, 5000);

in which case your code will work as expected, since crossfade is visible at the point where you call setInterval.

answered Nov 24, 2009 at 19:09

mtyaka

8,8382 gold badges40 silver badges40 bronze badges

2 Comments

magenta placenta Over a year ago

Yeah, I tried this, but I get an error about it not being called with quotes.

Nosredna Over a year ago

The preferred way is without the quotes. What error message did you get, exactly?

Nosredna · Accepted Answer · 2009-11-24 19:04:21Z

1

To avoid polluting the global scope, you can do a few things:

Extend jQuery, since you're already using jQuery. (Use jQuery as a namespace.)
Create a single object to hold your methods. (Create your own namespace.)

answered Nov 24, 2009 at 19:04

Nosredna

86.7k16 gold badges98 silver badges124 bronze badges

Collectives™ on Stack Overflow

Closure/scope JavaScript/jQuery

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related