Return value from javascript function

Question

I have a section of code in my $(document).ready(function() {} that reads: getInitial(len); Where len is an integer.

function getInitial(number){
    number--;
    if(number < 0) return
    var $items = $(balls()); 
    $items.imagesLoaded(function(){
        $container
        .masonry('reloadItems')
        .append( $items ).masonry( 'appended', $items, true );
    });
    getInitial(number);
}

Notice the line that reads: var $items = $balls(());

That is defined as:

function balls(){
    $iterator -= 1;
    if($iterator < 0){
        var $boxes = $( '<div class="box">No more games!</div>' );
        $container.append( $boxes ).masonry( 'appended', $boxes, false );   
        return; 
    }
    var imgPreload = new Image();
    var ret; 
    imgPreload.src = 'scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300';
    $(".imgHolder").append('<img src="'+imgPreload.src+'"/>');
    //console.log(imgPreload);
    $(".imgHolder").imagesLoaded(function(){
        ret = '<div class="box" style="width:18%;">'
            +'<p>'+$test[$iterator][1][2]['name']+'</p>'
            +'<img src="'+imgPreload.src+'"/>'//Replace this with the one below when timthumb is whitelisted
            +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
            +'</div>';
    });
    console.log(ret);
    return ret;
}

My question is how can I get ret from the imagesLoaded() method inside of the balls() function to return to the $items inside of getInitial()?

I hope there's no more confusion.

Well, it's not even in the function. So far the return isn't in a function at all. But since it's asynchronous, returning something from that function isn't going to help anyway. Without further context it's difficult to help. — Dave Newton
– Dave Newton, Commented Jul 28, 2012 at 1:46
It seems like the callback function of imagesLoaded is asynchronous, in which case you can't return the value immediately. — Šime Vidas
– Šime Vidas, Commented Jul 28, 2012 at 1:51
@JTorres I make almost no assumptions about the context of someone else's code when it's clearly incomplete. Particularly with asynch code, context is critical. For example, Ricardo's answer ignores the asynch nature and returns the HTML immediately--that may be okay, but it happens before the image is loaded, which is very different behavior. — Dave Newton
– Dave Newton, Commented Jul 28, 2012 at 1:52
@DaveNewton It was clear enough to me, why else would you have it in a function, I think you're being too picky. It's pretty clear that the question is how come ret doesn't contain the right values when that return statement is reached — Ruan Mendes
– Ruan Mendes, Commented Jul 28, 2012 at 1:54

Ruan Mendes · Accepted Answer · 2012-07-28 02:30:00Z

Since your function runs asynchronously, you need a callback function. You cannot have it return a value. Return values by passing callbacks.

function getInitial(number){
    number--;
    if(number < 0) return
    // Can't do the following, it's asynchronous
    // var $items = $(balls()); 

    // Do this instead
    balls(function(html) {
        var $items = $(html);
        $items.imagesLoaded(function(){
            $container
            .masonry('reloadItems')
            .append( $items ).masonry( 'appended', $items, true );
        });
        getInitial(number);
    })
}

function balls(callback){
    $iterator -= 1;
    if($iterator < 0){
        var $boxes = $( '<div class="box">No more games!</div>' );
        $container.append( $boxes ).masonry( 'appended', $boxes, false );   
        return; 
    }
    var imgPreload = new Image();
    var ret; 
    imgPreload.src = 'scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300';
    $(".imgHolder").append('<img src="'+imgPreload.src+'"/>');
    //console.log(imgPreload);
    $(".imgHolder").imagesLoaded(function(){
        callback('<div class="box" style="width:18%;">'
            +'<p>'+$test[$iterator][1][2]['name']+'</p>'
            +'<img src="'+imgPreload.src+'"/>'//Replace this with the one below when timthumb is whitelisted
            +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
            +'</div>');
    });
}

Callbacks is how you return values from asynchronous functions

There are probably still problems, the code is very confusing. But this should get you going in the right direction.

@JTorres It does answer the question. Your answer doesn't work. There is no way to return a value (synchronously) from a function if you're getting the value asynchronously. Callbacks are the only way to return values from async functions.
I did try this, but it ended up being the same question as my OP, I've updated my OP actually in an attempt to clarify my question better.
Why was this downvoted? This is the correct answer, at least as far as could be determined from the original question. +1 to offset.
@Adola You did not try this I can guarantee you that. Your example is still calling balls() and not passing a callback function. Re-read what the answer is saying and update it to using asynchronous code.
@DaveNewton Thanks man, even after our friendly discussion, you still showing love :)

Ricardo Lohmann · Accepted Answer · 2012-07-28 01:50:50Z

1

Try the following:

var imgPreload = new Image();
var ret = '<div class="box" style="width:18%;">'
          +'<p>'+$test[$iterator][1][2]['name']+'</p>'
          +'<img src="'+imgPreload.src+'"/>'
          +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
          +'</div>'; 
imgPreload.src = 'scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300';
$(".imgHolder").append('<img src="'+imgPreload.src+'"/>');
//console.log(imgPreload);
$(".imgHolder").imagesLoaded();
return ret;

answered Jul 28, 2012 at 1:50

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

2 Comments

Ricardo Lohmann Over a year ago

@JuanMendes The difference is that ret receive it's value before load images. On his code ret receives it's value after load images, but it has already been returned.

Ruan Mendes Over a year ago

It does seem like it would work, since there is nothing used in ret that is set from the imagesLoaded handler. Then why is the OP calling it from imagesLoaded?

Collectives™ on Stack Overflow

Return value from javascript function

2 Answers 2

14 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

2 Comments

Linked

Related