如何向SharePoint JSOM的onQuerySucceeded回调函数传递自定义参数

你的代码核心问题在于回调函数的传递方式错误，导致自定义参数element无法正确传入onChildQuerySucceeded，同时还提前执行了回调函数而非把它作为异步触发的逻辑。下面给你两种可行的解决方案，以及对应的代码修正：

方法1：闭包包装回调函数 #

通过闭包把element变量封装起来，确保异步回调触发时能正确获取到这个参数：

function onChildQuerySucceeded(sender, args, element) {
    alert(element); // 现在可以正确拿到自定义参数了
    var listItemInfo = "";
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        console.log(oListItem.get_item('Title') + " Category: " + oListItem.get_item('Category1'));
    }
}

function getChild(element) {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('ListName');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><Query><Where><Contains><FieldRef Name='Category1' Ascending='True' /><Value Type='Choice'>" + element + "</Value></Contains></Where></Query></View>");
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    
    clientContext.executeQueryAsync(
        // 用闭包包装原回调，手动传递element参数
        Function.createDelegate(this, function(sender, args) {
            onChildQuerySucceeded(sender, args, element);
        }),
        Function.createDelegate(this, onChildQueryFailed)
    );
}

function onChildQueryFailed(sender, args) {
    alert('请求失败: ' + args.get_message() + '\n' + args.get_stackTrace());
}

方法2：使用Function.bind()绑定参数 #

这种方式更简洁，通过bind把自定义参数和this上下文一起绑定到回调函数上：

// 注意参数顺序：自定义参数放在最前面
function onChildQuerySucceeded(element, sender, args) {
    alert(element);
    var listItemInfo = "";
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        console.log(oListItem.get_item('Title') + " Category: " + oListItem.get_item('Category1'));
    }
}

function getChild(element) {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('ListName');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><Query><Where><Contains><FieldRef Name='Category1' Ascending='True' /><Value Type='Choice'>" + element + "</Value></Contains></Where></Query></View>");
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    
    clientContext.executeQueryAsync(
        // 绑定element参数和当前this上下文
        onChildQuerySucceeded.bind(this, element),
        onChildQueryFailed.bind(this)
    );
}

function onChildQueryFailed(sender, args) {
    alert('请求失败: ' + args.get_message() + '\n' + args.get_stackTrace());
}

为什么原来的写法不行？ #

你之前的代码Function.createDelegate(this, onChildQuerySucceeded(element))存在两个问题：

1. onChildQuerySucceeded(element)是立即执行函数，会直接调用这个函数并把返回值（这里是undefined）传给createDelegate，而非把函数本身作为回调。
2. 即使能传递函数，onChildQuerySucceeded也没有定义接收自定义参数的入口，所以无法获取element。

内容的提问来源于stack exchange，提问作者Joseph Jojo John