Function is undefined after being defined in Javascript

Question

This jsFiddle highlights my issue.
It is mimicking some functionality I have where an Object is defined and sent to the Page via socket.io.

I have a setInterval function checking if Pots is a function, and when it is I fire an Event. During that Event I try to instantiate a new instance of Pots only to be told that it is undefined.

The code:

var Pots;

$(document).ready(function(){
    var timerId = 0;
    var otherTimer = 0;

    otherTimer = setInterval(function() { console.log("Creating"); Pots = function() {}; }, 5000);

    timerId = setInterval(function() {
        console.log("Checking");

        if (_.isFunction(Pots)) {
            console.log(Pots);
            clearInterval(timerId);
            clearInterval(otherTimer);

            var evt = document.createEvent('Event');
            evt.initEvent('ObjectsAvailable', true, true);
            document.dispatchEvent(evt);
        }

    }, 1000);

});

document.addEventListener('ObjectsAvailable', function(e) {
    console.log(Pots);
    var Pots = new Pots();
});

EDIT
Posted this comment below:
I should point out that Pots is actually a Backbonejs Collection with this declaration: var Pots = Backbone.Collection.extend({model: Pot});. The reason I did the event is because there IS a time when "Pots" isn't set (probably before the browser has loaded the file with Pots declared). The jsFiddle was just to simulate that time exists. In my actual code "otherTimer" doesn't exist and Pots IS eventually a Function but when I try to use it during the ObjectsAvailable event, it doesn't work.

Pointy · Accepted Answer · 2012-08-11 18:11:42Z

3

You never set the global variable "Pots" to any value, so it remains undefined.

The "ObjectsAvailable" handler looks like it attempts to set it, but

It tries to call "Pots()" to do so, so that won't work, and
It declares a local variable "Pots" too, so that hides the global one.

Another note: the fiddle is set up with the code to be run in the window "load" handler, so the "ready" handler is redundant.

answered Aug 11, 2012 at 18:11

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

5 Comments

Benjamin Gruenbaum Over a year ago

+1, 2 is right, when he does var Pots he hides the global one

Pointy Over a year ago

@BenjaminGruenbaum yes so it's sort-of double wrong. Even without the var it wouldn't work.

James P. Wright Over a year ago

I should point out that Pots is actually a Backbonejs Collection with this declaration: var Pots = Backbone.Collection.extend({model: Pot});. The reason I did the event is because there IS a time when "Pots" isn't set (probably before the browser has loaded the file with Pots declared). The jsFiddle was just to simulate that time exists. In my actual code "otherTimer" doesn't exist and Pots IS eventually a Function but when I try to use it during the ObjectsAvailable event, it doesn't work.

Pointy Over a year ago

Well, it may be that in some code, but in the question the global variable Pots was declared without any initialization. It's sort-of a waste of time to post an example that does not accurately represent the actual code, especially in such a critical way. In any case, the var in your handler function is the main problem.

James P. Wright Over a year ago

AH! I see now, yes the problem was the var in the Event Handler. Thank you!

Collectives™ on Stack Overflow

Function is undefined after being defined in Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related