javascript - 带参数的回调

Question

我有 jQuery 函数:

$('#fetch').click( function() {
    ...
    GetPage( curPage, items, DrawItemSet( items ) )
});

如您所见，我希望从 GetPage 函数内部执行回调函数 DrawItemSet。有时，我需要调用的不是 DrawItemSet，而是其他一些函数。我只想调用需要从 GetPage 函数调用的任何函数。在(正如您可能猜到的那样)我得到页面后，有必要做一些后续工作。在这个例子中，我想显示一些数据。在其他情况下，我不想显示某些文本，但是，例如，交换从 GetPage 函数获得的信息。在那种情况下，我的想法是编写如下内容:

...
GetPage( curPage, items, SwapItemSet( oldItems ) )  

目前看来一切正常

这是我的 GetPage 列表:

function GetPage( pageNum, collection, callback ) {
    console.log( 'Starting to get page number ' + pageNum )
    $.ajax({
    url:        'http://www.xxxxxxxxxxx.php?page=' + pageNum,
    type:       'get',
    dataType:   '',
    success: function(data) {
        ...
        console.log( 'Curpage=' + curPage + ' MaxPage=' + maxPages )
        if( curPage < maxPages ) {
            curPage = curPage + 1
            GetPage( curPage, collection, callback )
        }
        else {
            console.log( 'passed' )
            callback()
        }
    }
});
}  

如您所见，当还有一些页面要获取时，此函数会调用自身，如果没有剩余页面，则应调用回调函数来执行某些操作。您可以在下面看到的回调示例(仅用于测试):

function DrawItemSet() {
    console.log( 'DrawItemSet called.' )
    ...
}

我的问题是，理论上一切看起来都正常，我应该将 DrawItemSet 作为最后一条消息进入控制台，这意味着回调函数在获取完成后被调用。好吧..取而代之的是我得到以下内容:

DrawItemSet called.
Starting to get page number 1
Curpage=1 MaxPage=2
Starting to get page number 2 
Curpage=2 MaxPage=2 
passed 

这意味着回调是第一个被执行的函数。

怎么会这样？!

Answer 1

当您编写 DrawItemSet( items ) 时，您会立即调用 DrawItemSet，然后将其返回值作为 callback 传递。这就是为什么它被称为第一个。您甚至在调用 GetPage 之前调用它。

有几种方法可以将其作为带参数的回调传递。最常见的方法是像这样传入一个匿名函数:

GetPage( curPage, items, function(){ DrawItemSet( items ) } );

在现代浏览器中，您还可以使用 bind :

GetPage( curPage, items, DrawItemSet.bind(null, items) );

或者您可以使用名为 proxy 的 jQuery 版本的 bind :

GetPage( curPage, items, $.proxy(DrawItemSet, null, items) );