How to return a value from a nested and anonymous function?

Question

I have this JS code:

function paging() { 
    $('.paging li').click(function(e) {
        $('.paging li a').removeClass("active");
        $(this).find('a').addClass("active");
        $('#img-grp-wrap img').hide();

        var indexer = $(this).index(); 
        $('#img-grp-wrap img:eq('+indexer+')').fadeIn();    

        e.preventDefault();
        return indexer;
    });
}

var $cur_page = paging();
console.log($cur_page);

I would like to use the indexer value outside the function paging() but when I try doing console.log(), it just says undefined.

How do I structure this so that I can pass the index value of the link I clicked outside the function (which is the indexer variable)?

I'm a programming newbie so please bear with me.

jfriend00 · Accepted Answer · 2012-05-02 03:58:51Z

3

It sounds like you really don't understand how event handlers work. When you install a click handler, you are telling the system that you would like it to call this function when a click happens some time in the future. Your function paging() runs and completes long, long before your element gets clicked on and your anonymous function gets called. As such, the paging() function CANNOT return the result of the click handler because the click hasn't even happened yet.

If you have some code that wants to use the indexer value then you need to call that code from the click handler and pass the value of indexer as an argument to the function you're calling. That might look something like this:

$('.paging li').click(function(e) {
    $('.paging li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#img-grp-wrap img').hide();

    var indexer = $(this).index(); 
    $('#img-grp-wrap img:eq('+indexer+')').fadeIn();    

    e.preventDefault();
    // call a function and pass it the indexer value
    processIndex(indexer);
});

Notice, I've also removed the paging function because you don't want to call that more than one time because it would install your event handlers again.

edited May 2, 2012 at 3:58

answered May 2, 2012 at 3:52

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

catandmouse Over a year ago

Ok, I will try that. Like I said at the bottom, I'm a programmer newbie and calling functions and concept of event handlers are still somewhat foggy in my head (although I understand bits and pieces of them). Thanks anyway.

catandmouse Over a year ago

(LOL, funny if I know how things are supposed to work, I wouldn't have asked the question in the first place.)

jfriend00 Over a year ago

@catandmouse - Why are you responding to me 3-1/2 years later? What prompted a response just now? And I'm curious why the latest comment?

Ivan Karajas · Accepted Answer · 2012-05-02 04:10:26Z

As @jfriend00 says, you can't access a return value from an event handler in the way you're thinking, due to the way that they work.

However, you can certainly get them to set a variable in an external (e.g. global) scope and then get them to trigger whatever action needs to run after the event has occurred. Or you can pass in a value as a parameter to another function.

E.g.

// Declare external variable outside event handler.
var pagingOutput;

function paging() { 
    $('.paging li').click(function(e) {
        // Handle event...

        pagingOutput = someValue;
        actionToPerfomAfterPaging();

        // Of course, you could also do something like this...
        actionToPerformAfterPaging_2(someValue);

    });
}

function actionToPerfomAfterPaging() {
    doSomethingWithPagingOutput(pagingOutput);
}

function actionToPerfomAfterPaging_2(val) {
    doSomethingWithPagingOutput(val);
}

var $cur_page = paging();
console.log($cur_page);

The reason why you can't return a value from an event handler is that the script runs on the same thread that is responsible for handling everything else on the page. If you were to theoretically design a way for an event handler to return a value, you would have to block the thread until the event fired. This would mean that the page would freeze until the occurrence of whatever event the handler was associated with, e.g. the user clicking a button.

Collectives™ on Stack Overflow

How to return a value from a nested and anonymous function?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related