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.

Answer 1

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.