Refer to outer function in Javascript (using jQuery)

Question

I have these lines of javascript code which run when the page is loaded:

(function my_function() {
    //my stuff
})();

$("select#myselect").change( function() {
    if ($('select#myselect').val() == '1') {
        timer = setTimeout(my_function, 1000*5); //this line throws the error
    } else {
        if(typeof timer !== 'undefined'){
            clearTimeout(timer);
        }
    }
});

When the line highlighted is executed it throws: "Uncaught ReferenceError: my_function is not defined"

How can I fix it?

As the other two have hinted at, your function is in a closure, which is being called as something akin to an anonomous function, see developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures — Algorath
– Algorath, Commented Apr 3, 2014 at 15:17

Levi Beckman · Accepted Answer · 2014-04-03 15:11:51Z

1

It looks like you are trying to run my_function first, and then run it again with the timer.

function my_function() {
    //my stuff
}
my_function();

$("select#myselect").change( function() {
    if ($('select#myselect').val() == '1') {
        timer = setTimeout(my_function, 1000*5); //this line throws the error
    } else {
        if(typeof timer !== 'undefined'){
            clearTimeout(timer);
        }
    }
});

answered Apr 3, 2014 at 15:11

Levi Beckman

5333 silver badges8 bronze badges

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

Comments

Biduleohm · Accepted Answer · 2014-04-03 15:24:50Z

1

Try to change this:

(function my_function() {
    //my stuff
})();

To this:

function my_function() {
    //my stuff
}
my_function();

Edit: Your function my_function isn't callable in the global scope because this pattern creates a local scope. Read this excellent wiki article for more informations.

edited Apr 3, 2014 at 15:24

answered Apr 3, 2014 at 15:11

Biduleohm

7502 gold badges11 silver badges20 bronze badges

1 Comment

Algorath Over a year ago

@Bergi, I made a comment without thinking about what I was saying. Removing

Michael Giovanni Pumo · Accepted Answer · 2014-04-03 15:30:02Z

You have what's called a closure going on, whereby you cannot access it (by design). Try this instead (also with some additional improvements...

function my_function() {
    //my stuff
}

// Call your function...
my_function();

var $mySelect = $("select#myselect");

$mySelect.on("change", function() {
    if ($mySelect.val() == '1') {
        timer = setTimeout(my_function, 1000*5); //this line throws the error
    } else {
        if(typeof timer !== 'undefined'){
            clearTimeout(timer);
        }
    }
});

I also cached your look up of select#myselect into a variable...because it will improve performance (admittedly marginally). In addition, I used the more preferred and newer on() method for your change event.

Hope this helps!

Collectives™ on Stack Overflow

Refer to outer function in Javascript (using jQuery)

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