Передать параметры в функции обратного вызова Javascript

Question

Вот что у меня есть:

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

И arg2, arg3 доступны в callbackForGetData

function callbackForGetData(result) {

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

Как мне это сделать?

Answer 1

Чтобы передать больше аргументов, вы можете использовать call или apply.

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

Answer 2

Передача объекта в качестве одного параметра:

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 
}

Answer 3

Вы ищете замыкание.

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

Вот рабочий jsfiddle.

Обратите внимание, что поддерживается только один (1) ожидающий вызов getData.Необходима более сложная схема для поддержки нескольких одновременных ожидающих вызовов getData.Каждому из них потребуется уникальное имя закрытия обратного вызова, которое может быть таким же простым, как конечный числовой серийный номер.

Answer 4

Вы можете передать их обратному вызову и получить доступ к ним в массиве arguments

function getData(result) {
  //result === arg1
  //arguments[0] === arg1
  //arguments[1] === arg2
  //arguments[2] === arg3
  //and so on
}

getData(arg1, arg2, arg3);