将参数传递给Javascript回调函数

这就是我所拥有的：

function populateElement(arg1) {

    getData(arg1); 
}

function getData(query) {

    var url = "http://foo" + query + "&callback=processData";
    // do stuff 
}

function processData(results) {

    callbackForGetData(results); 
}

function callbackForGetData(result) { 

    // process data 
}

我想再向函数populateElement传递两个参数，如下所示：

function populateElement(arg1, arg2, arg3) {

    getData(arg1);
}

并在callbackForGetData中提供arg2和arg3

function callbackForGetData(result) {

    // process data
    // use arg2, arg3 here
}

---

我应该怎么做呢？

您可以将它们传递到回调，并在arguments数组中访问它们

---

将对象作为单个参数传递：

function populateElement(arg1, arg2, arg3) {

    var params = {"arg1":arg1,"arg2":arg2,"arg3",arg3};
    getData(params);
}

function getData(params) {

    var query = params.arg1;
    var url = "http://foo" + query + "&callback=processData";
    // do stuff 
}

---

你正在寻找一个结束

function getData(query) {
    var url = "http://foo" + query + "&callback=processData";
    // do stuff
    //simulate the callback
    processData("some results");
};

function populateElement(arg1, arg2, arg3) {
    //Because we define processData here, we have a closure scope that
    // lets us see all the arguments to populateElement
    window.processData = function(results) {
        console.log("ProcessData called with results: " + results +
            ", arg2: " + arg2 + ", arg3: " + arg3);  
    };
    getData(arg1);
}
//Simulate the starting call
populateElement(4, 5, 6);

---

注意，这只支持单个1挂起的getData调用。为了支持多个并发挂起的getData调用，需要一个更复杂的方案。每个回调函数都需要一个唯一的回调函数闭包名，可以是一个简单的尾随数字序列号。

要传递更多参数，可以使用call或apply

但正如Peter所建议的，这里有一些异步的东西，您希望将其保存在闭包中，而不是传递额外的参数

使用类似的方法，将数据保存在闭包中：

function processData(results) {
  // transform data
  myModule.callbackForGetData(results); 
}

window.myModule = {

  populateElement: function(arg1, arg2, arg3) {

    this.data = arguments;
    this.getData(arg1); 
  },

  getData: function(query) {

    var script = document.createElement('script');
    script.src = 'http://jsfiddle.net/echo/jsonp/?query=' + query + '&callback=processData';
    document.getElementsByTagName('head')[0].appendChild(script)
  },

  callbackForGetData: function(result) { 

      // process data 
      console.log('Args: ', this.data, ', remote result: ', result);
  }
}

// test it
myModule.populateElement(1, 2, 3)
> Args:  [1, 2, 3] , remote result:  Object {query: "1"}

---

为什么不直接调用getData？的可能重复。我在回答这个问题时提供了一个解决方案的概要。@Adam:问题是callbackForGetData被称为JSONP回调，因此OP无法控制它的调用方式。mu太短-首先，这不是一个重新发布。我是JS和回调的新手，我真的不明白你所说的“无法控制如何调用”是什么意思。我可以更改callbackForGetData。他的问题是如何在他的回调函数中获得arg1、arg2和arg3。我知道，但我假设他不想更改回调，或者不能更改回调，否则他可以向getData添加参数并使用这些参数。这不会起作用。问题是回调是通过JSONP调用的。你需要，你是怎么发现的？问题中没有说…：|@詹姆斯，我真的对这些回电感到困惑。我可以更改回调函数。你能举个例子吗？谢谢。我需要定义一个嵌套在populateElement中的函数，这样我就可以通过闭包访问populateElement参数。我显式地分配给window，因为像这样显式是最清晰和最容易混淆的事情。否则，众所周知，JS默认行为容易混淆，因此最好避免歧义或意外/隐式行为。这只是我个人的指导方针。

function log(a, b, c) { console.log('A: ', a, ', b: ', b, ', c: ', c);}

log.call(window, 'first', 'second', 'third');
> A:  first , b:  second , c:  third

log.apply(window, ['first', 'second', 'third'])
> A:  first , b:  second , c:  third

function processData(results) {
  // transform data
  myModule.callbackForGetData(results); 
}

window.myModule = {

  populateElement: function(arg1, arg2, arg3) {

    this.data = arguments;
    this.getData(arg1); 
  },

  getData: function(query) {

    var script = document.createElement('script');
    script.src = 'http://jsfiddle.net/echo/jsonp/?query=' + query + '&callback=processData';
    document.getElementsByTagName('head')[0].appendChild(script)
  },

  callbackForGetData: function(result) { 

      // process data 
      console.log('Args: ', this.data, ', remote result: ', result);
  }
}

// test it
myModule.populateElement(1, 2, 3)
> Args:  [1, 2, 3] , remote result:  Object {query: "1"}