CODEWITHSUNDEEP
javascriptjquery
catandmouse
catandmouse

Reputation: 11809

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

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.

Upvotes: 0

Views: 341

Answers (2)

Ivan Karajas
Ivan Karajas

Reputation: 1101

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.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707178

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.

Upvotes: 3

Related Questions