javascript - 进行异步 AJAX 调用后运行函数，传递变量

Question

我正在处理的一些代码遇到问题。我有一个通用函数(ajaxContent)，可以从多个 Angular 使用。我需要的是在进行 AJAX 调用后运行一个函数，但我需要传递在进行调用之前拥有的一些数据(因此不是从 AJAX 调用返回的数据。

function ajaxContent(url, id, target, data, callbackFunction) {

  $.ajax({
    async : true,
    ....    
    complete: function(){
      if(typeof callbackFunction == "function"){
        callbackFunction(); // function get's executed here, lead_id is not available
      }
    }
  });
}    

$(document).on("click", "#something", function(){
  var leaf_id = $(this).attr('rel');

  ajaxContent(url, id, target, data, function(leaf_id){

    url = "/path/" + leaf_id;
    window.location = url;

  })
})

$(document).on("click", "#action", function() {

    ajaxContent(url, id, target, data, function(){

        if ($(this).attr('rel') == "M_0") // $(this).attr('rel') not available here, so need to pass through some way
            $('#treedata').css('background', 'url(/img/rotonde.png) 50% 50% no-repeat');
  });

});    

我也许可以使用类似的东西

function ajaxContent(url, id, target, data, callbackFunction, varA, varB, varC, varD) { 
   callbackFunction(varA, varB, varC, varD);
} 

与

ajaxContent(url, id, target, data, function(varA){
}, varA, varB, varC, varD)` 

但并不是真正可扩展的。

我希望这是清楚的:-)

Answer 1

在您现在的答案中的代码中，leaf_id 是 document.ready() 处理函数内的局部变量。因此，它在该上下文之外不可用。

您有多种选择来解决这个问题:

1. 您可以将 ajaxContent 函数的定义移动到 document.ready() 处理函数中，以便它能够看到 leaf_id。

2. 您可以将 leaf_id 设为全局变量，以便可以从任何地方访问它。

3. 您可以将 leaf_id 作为函数参数传递给 ajaxContent。

如果没有更多关于您正在做什么的上下文，并且因为这是一个仅与特定操作相关的 transient 值，我认为最好的选择是＃3:

function ajaxContent(url, id, target, data, leafID, callbackFunction) {

    $.ajax({
        async : true,
    ....        
        complete: function(){
          if(typeof callbackFunction == "function"){
            // you can access any of the ajaxContent function arguments here
            callbackFunction(leafID);
          }
        }
    });
}       

$(document).on("click", "#something", function(){
  var leaf_id = $(this).attr('rel');

  ajaxContent(url, id, target, data, leaf_id, function(leafID){

    url = "/path/" + leafID;
    window.location = url;

  })
})

或者，如果您有很多变量要传递，您可以创建一个空对象，然后将每个变量作为该对象的属性，然后将单个对象传递到 ajaxContent 和回调中，如下所示:

function ajaxContent(url, id, target, data, settings, callbackFunction) {

    $.ajax({
        async : true,
    ....        
        complete: function(){
          if(typeof callbackFunction == "function"){
            // you can access any of the ajaxContent function arguments here
            callbackFunction(settings);
          }
        }
    });
}       

$(document).on("click", "#something", function(){
  var args = {};
  args.leafID = $(this).attr('rel');

  ajaxContent(url, id, target, data, args, function(settings){

    // access args.leafID here
    url = "/path/" + leafID;
    window.location = url;

  })
})

请注意，在我的代码示例中，我将参数命名为与其他变量不同的名称，以避免混淆。