Не понимаю JavaScript. Как сделать ожидание события загрузки данных?

Question

[Xintrea]

Есть у меня «класс», у которого сделан метод init(). В нем происходит вызов метода load() для загрузки данных с сервера (реализация xmlrpc в jQuery).



Задача: вызвать загрузку данных и дождаться результата. Если загрузка удачна — продолжить инит, если была ошибка — завершить инит.



Вот код:

// Глобальные переменные - статусы загрузки данных с сервера<br>
var lb_load_status_ok=0;<br>
var lb_load_status_in_process=1;<br>
var lb_load_status_error=2;<br>
<br>
...<br>
<br>
function LBTeamData() <br>
{<br>
 var loadStatus;<br>
<br>
 this.init = function(id) <br>
 {<br>
  // Загрузка с сервера информации<br>
  this.load(id);<br>
  <br>
  // Ожидание завершения загрузки<br>
  while( loadStatus==lb_load_status_in_process ){};<br>
<br>
  // Если была ошибка  <br>
  if(loadStatus==lb_load_status_error)<br>
   return;<br>
  <br>
  // ... здесь продолжается инициализация ... <br>
 };<br>
 <br>
<br>
 this.load=function(teamId) <br>
 {<br>
  loadStatus=lb_load_status_in_process;<br>
<br>
  var that = this;<br>
<br>
  // Получение данных о команде  <br>
  $.xmlrpc({<br>
        url: 'http://'+window.location.host+'/XmlRpcServer',<br>
        methodName: 'getTeam',<br>
        params: [teamId],<br>
        success: function(response, status, jqXHR){ that.successLoad(response, status, jqXHR); },<br>
        error: function(jqXHR, status, error) { that.errorLoad(jqXHR, status, error); }<br>
  });<br>
<br>
 };<br>
<br>
 // Обработчик получения данных<br>
 this.successLoad=function(response, status, jqXHR) <br>
 {<br>
  loadStatus=lb_load_status_ok;<br>
<br>
  name=response[0]['name']; // Название команды<br>
  unitsNames=response[0]['unitsNames']; // Имена игроков<br>
<br>
  alert("Success load data from server");<br>
 };<br>
<br>
 // Обработчик ошибки при получения данных<br>
 this.errorLoad=function(jqXHR, status, error) <br>
 {<br>
  loadStatus=lb_load_status_error;<br>
<br>
  alert("Error at getting team data from server: "+error);<br>
 };<br>
<br>
}<br>

Проблема в строке с циклом while(). На нем скрипт затыкается как на бесконечном цикле.



Если его убрать, то через некоторое время появится сообщение «Success load data from server». Это свидетельствует о том, что данные в подгружаются нормально.



Но я не могу понять, как в «линейном» коде метода init() дождаться появления этих данных. Флаги не помогают. Встраивать обработчики прямо в «линейный» код как лямбды — это издевательство, код получает рваный и плохо сопровождаемый.



Вопрос. Почему не работает этот кусок кода? Почему в цикле while() не отслеживаетс изменение свойства loadStatus? Как сделать чтоб отслеживалось?

Answer 1

[jdponomarev]

Конечно зависает, это же и есть бесконечный цикл.
Передайте, например, в функцию load колбек

this.load=function(teamId,callback) {

};

и вызывайте его после загрузки
success: function(response, status, jqXHR){ that.successLoad(response, status, jqXHR); callback(); }

а в init — this.load(id,function(){
alert(«я загрузился»);
});

Comments

[Xintrea]

Так этими коллбаками можно играться до бесконечности.

Вы показали вызов функции load() с коллбаком в случае успешной загрузки.

А теперь смотрите. Есть же вышестоящий код, который вызывает вышеприведенный LBTeamData.init(). Так как init() выплнится неблокируемо (вызовет load() с коллбеком и не будет дожидаться результата), то метод init() завершится до того, как будут получены данные, и на самом деле ничего не проинитив вернет управление в вышестоящий код.

Вопрос. А что делать в вышестоящем коде?

Тоже делать вызов init() с коллбаком, чтобы отловить момент завершения этого init()?

А если есть еще вышестоящий код? В нем тоже городить огород с коллбаками?

[jdponomarev]

Нужно вообще в любую асинхронную функцию в js передавать колбек.
function(params,callback){};

В итоге Вы получите «лапшу» из колбеков
func1({},function(){ func2({},function(){ // и так далее }); });

Если это совсем не устраивает, то можно использовать promises-например, эту библиотеку
github.com/kriskowal/q

Но вообще, я бы посоветовал привыкать :)

Answer 2

[Artem Moseev]

Посмотрите в сторону объекта Deferred, пример с ajax:

function LBTeamData(id){

    this.init = function(id) {
        // Загрузка с сервера информации
        this.load(id).done(function() {
           // ... здесь продолжается инициализация ... 
          alert("продолжаем после успешного запроса");
        }).fail(function(message) {
          alert('ошибка..')
        });
    };
     
    this.load=function(teamId){
        var dfr = $.Deferred();
        alert('посылаем запрос');
        $.ajax({
                url: '2.php',
                success: function(response, status, jqXHR){ dfr.resolve();},
                error: function(jqXHR, status, error) { dfr.reject() ; }
        });
        return dfr;
    };

    this.init();

};

Также существует ряд библиотек-оберток для этого объекта, мне в свое время приглянулась JSDeferred

Comments

[kotia]

Если это jquery deferred то возвращать надо dfr.promise() а не dfr

[creage]

Можно и dfr, разница только в возможности изменять объект промиса. Но именно в данном коде можно просто вернуть сам $.ajax — он является обычным промисом.

Answer 3

[kxyu]

Но я не могу понять, как в «линейном» коде метода init() дождаться появления этих данных.

Правильный ответ — никак. Вообще XMLHhttpRequest может работать синхронно, но по понятными причинам это почти никогда не используется.

Почему в цикле while() не отслеживаетс изменение свойства loadStatus? Как сделать чтоб отслеживалось?

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

Встраивать обработчики прямо в «линейный» код как лямбды — это издевательство, код получает рваный и плохо сопровождаемый.

Это javascript, привыкайте

Answer 4

[Sergey Cherepanov]

Просто надо заменить асинхронный вызов, на синхронный.

Comments

[Sergey Cherepanov]

api.jquery.com/jQuery.ajax/#jQuery-ajax-settings параметр async: false

[creage]

И повесить весь браузер, пока не вернется ответ. Синхронный ajax, это выстрел в ногу.

[Sergey Cherepanov]

Зато это то что хотел автор. И все же лучше While

Answer 5

[andrevinsky]

Возможно, это поможет? habrahabr.ru/post/210820