Почему код выполняется раньше функции?

Question

[Алексей]

Всем привет! Пытаюсь сделать слайдер изображений. Каждое изображение перед выводом, получаем с сервера.

function LImage(post_data){
   var data = GetImageData(post_data); // функция просто получает данные с сервера

   // строка ниже отрабатывается раньше, чем данные записываются в data.
   $('.modal__image')
      .animate({opacity: 0.3})
      .attr('src', data.data.content.this_image.url)
      .load(function(e){
         $('.modal__image').stop().animate({opacity: 1}, 1);
         $('.modalui__next').attr('onClick', 'LImage(\''+data.data.content.next+'\')');
         $('.modalui__prev').attr('onClick', 'LImage(\''+data.data.content.prev+'\')');
      });
}

Проблема в том, что строка (пометил комментарием в коде), отрабатывается раньше чем функция GetImageData. В итоге в src ничего не записывается.
Что тут происходит? как исправить?

Answer 1

[Дмитрий Евграфович]

Добавить в GetImageData коллбэк функцию, которая будет срабатывать только после удачной загрузки данных с сервера (и вставить ваш код в тело этой функции). Если используете $.ajax или $.get, почитайте документацию api.jquery.com/jquery.get - найдите там success функцию, она срабатывает как раз после удачного запроса, в нее и добавьте ваш код.

Comments

[Ivanq]

Не советую колбеки - будет callback hell (собственно, он и так есть). Лучше перейти на промисы. Да, те же колбеки, но даже такой сахар лучше, чем ничего.

Answer 2

[Vitaliy]

А GetImageData разве не получает данные асинхронно? В данном случае в data данные с сервера не записываются, и код выполняется дальше, не дожидаясь ответа сервера

Так или иначе, записаться в data полученные данные не могут, так как ответ с сервера приходит асинхронно, а это требует записи через callback.

Answer 3

[RTW]

Я так понимаю на промисе GetImageData делается пост запрос, вынеси свою строку в успешное выполнение запроса.