Понимание обратных вызовов jquery - PullRequest
4 голосов
/ 17 января 2011

Мне трудно понять, как должен работать обратный вызов javascript.Я использую следующий код для получения значений из базы данных MySQL:

  $.post("getResults.php", { x: 100, y: 200},       
   function(arrayOfValues){  
      alert( arrayOfValues[2] )         
   }, 'json');

alert() возвращает правильное значение и работает как ожидалось.Однако я не понимаю, как значение из arrayData[2] может быть передано или возвращено в другие части моей программы (и попытки, которые я предпринял, не сработали).

Я прочитал jquery help и многочисленные SO вопросы и ответы, но я не понимаю, как работает обратный вызов.

В этом случае я хочу, чтобы arrayOfValues ​​[2] был доступен моей основной программе.

Ответы [ 4 ]

2 голосов
/ 17 января 2011

$. Post () - это асинхронный (неблокирующий) вызов, что означает, что функция немедленно возвращается (не ожидает ответа сервера) и выполняется следующий код JavaScript. Когда приходит ответ от сервера, вызывается ваша функция обратного вызова с ответом ...

Допустим, вы хотите отобразить содержимое в div:

$.post('url.php', {}, function(content) {
  $('#div_id').html(content);
});

// or shorter:
$('#div_id').load('url.php', {});

Или вы можете иметь объект с некоторой логикой и зарегистрировать метод объекта в качестве обратного вызова:

function MyHandler(msgElement) {
  var sum = 0;
  this.onSuccess = function(content) {
    sum = sum + content[0];
    if (sum > 100) {
      msgElement.html('Sum has reached 100 !');
    }
  };
  this.otherMethod = function() {
    alert('Current sum is:' + sum);
  };
}

var handler = new MyHandler($('#my_div'));

// do the request
$.post('url.php', {}, handler.onSuccess, 'json');

// you can call any method of handler object using global variable handler
// or passing a reference (handler object) to any other object
// notice, if you call this method immediately after sending the request,
// the sum var is likely to be 0, as the response has not arrived yet...
handler.otherMethod();

По сути, у вас есть много вариантов. Так что если вам нужна дополнительная информация, укажите, что именно вы хотите сделать ответ ...

1 голос
/ 17 января 2011

Обратные вызовы, позвольте мне попытаться объяснить это так, чтобы вы могли понять.

  • Во-первых, вам нужно понять, как функция может быть назначена переменной без выполнения.

Это позволяет вам передавать функции и выполнять их только тогда, когда вы хотите, вот пример того, как я могу передать функцию в переменную и не выполнять ее:

a = function(){}

Это небольшойВ качестве примера и наиболее распространенного, вы бы назвали функцию, такую ​​как a(), добавив (), который сообщает функции для выполнения.

  • Теперь вы должны понимать, что вы можете передавать эти переменные в другую функцию, новызывая их

, приведенный ниже пример показывает, как вы можете передать функцию в вышеуказанную функцию a во время ее выполнения.

b = function(){}
b(a);
  • следующий шаг -возможность создавать анонимные функции, они позволят вам назначить функцию переменной при переходе в другую функцию

анонимная функция неподписан в момент написания, но назначается, когда он анализируется в области внешних функций.

вышеизложенное может быть немного сложным для понимания, но, надеюсь, пример прояснит его.

a(
    function(){}
);

Выше приведено то же, что и в примере b(a), за исключением того, что a теперь является анонимной функцией и присваивается только переменной внутри b, то есть внешней функции.

jQuer'iesAPI в значительной степени опирается на анонимные функции, так как они просты в использовании и создают отделение от jQuery Core и пользовательского кода, пользователю не нужно сильно полагаться на основной код jQuery, но нужно передать обратный вызов, чтобы позволить jQuery подключаться к вашему коду.

пример функции, которая использует аналогичные средства передачи данных в функции и из них, выглядит примерно так:

JoinUser = function(Firstname,Lastname,callback)
{
     Fullname = Firstname + " " + Lastname;
     callback(Fullname);
}

JoinUser("Robert","Pitt",function(Fullname)
{
    alert(Fullname); //Robert Pitt
})

В приведенном выше примере только приблизительно показано, как работает стиль jQuery., но не самое важное преимущество обратных вызовов, и это Ajax.

Ajax может остановить сценарий JavaScript до тех пор, пока его данныенапример, было получено:

Result = RequestPage("Contacts");

когда Ajax видит эту строку, он должен дождаться, пока RequestPage вернет результат, поскольку ожидается, что кодирование, расположенное ниже, потребует этого значения, поэтому мы должны наблюдатьесли данные будут возвращены с сервера до продолжения работы JavaScript, это может занять несколько секунд, и пользовательский интерфейс будет работать ненормально.

Чтобы обойти это, нужно отправить обратный вызов функции и сообщить ейвызовите, когда все выполнено, как я хочу, чтобы работать с остальной частью приложения.

RequestPage("Contacts",function(){});

, поэтому теперь JavaScript продолжает работу вниз по странице, выполняя нужную ему задачу, и внутри функции RequestPage он будет заложенвот так:

function RequestPage(page,callback)
{
    //..
        request.oncomplete = callback;
    //..
}

Таким образом, остальная часть вашего приложения выполнила другую задачу, и когда результат будет готов, вы можете изменить пользовательский интерфейс для получения результата.

Именно поэтому мыиспользуйте загрузчики для репликации рабочего состояния.

Я надеюсь, вы начнете понимать, как jQuery использует преимущества этих факторов javaScript, и это поможетр вы разрабатываете приложение.

1 голос
/ 17 января 2011
var foo;

$.post("getResults.php", { x: 100, y: 200 }, function(data) {  
    foo = data;       
}, 'json');

Данные ответа будут сохранены в переменной foo.Однако обратите внимание, что это асинхронная функция обратного вызова, которая вызывается при получении ответа HTTP.Важно понимать, что вы не можете использовать переменную foo до тех пор, пока не придет ответ HTTP и функция обратного вызова не завершится.

0 голосов
/ 17 января 2011

Существует много способов обработки возвращаемых данных.

Установите переменную с областью действия вне этой встроенной функции и передайте ей значение.

var result;

в обратном вызове result = arrayData;

Вы также можете вызвать функцию для выполнения других действий с результатом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...