javascript - 从 JavaScript 函数返回值

Question

我的 $(document).ready(function() {} 中有一段代码，内容如下:getInitial(len);其中 len 是一个整数。

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);
}

注意下面一行:var $items = $balls(());

定义为:

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;
}

我的问题是如何从 balls() 函数内部的 imagesLoaded() 方法中获取 ret 以返回到 $items 在 getInitial() 里面？

我希望没有更多的困惑。

Answer 1

由于您的函数异步运行，因此您需要一个回调函数。你不能让它返回一个值。通过传递回调返回值。

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>');
    });
}

回调是您从异步函数返回值的方式

估计还是有问题，代码很乱。但这应该会让您朝着正确的方向前进。