В jQuery Form «success» вызывается до завершения «beforeSubmit»

Question

Я использую плагин jQuery Form для загрузки изображения. Я назначил анимацию затухания для обратного вызова beforeSubmit, но, поскольку я работаю локально, у него нет времени, чтобы закончить до вызова функции success.

Я использую функцию обратного вызова в моем вызове fade();, чтобы убедиться, что одно затухание завершается до начала следующего, но, похоже, это не гарантирует завершения вызывающей его функции.

Я что-то не так делаю? Разве beforeSubmit не должен завершиться до отправки вызова ajax?

Вот два обратных вызова:

beforeSubmit:

function prepImageArea() {
  if (userImage) {
    userImage.fadeOut(1500, function() {
      ajaxSpinner.fadeIn(1500);
    });
  }
}

успех

function imageUploaded(data) {
  var data = evalJson(data);
  userImage.attr('src', data.large_thumb);
  ajaxSpinner.fadeOut(1500, function() {
    userImage.fadeIn(1500);
  });
}

Answer 1

Я думаю, что вы, возможно, слишком увлекаетесь этими анимациями затухания:) ... В beforeSubmit fadeOut настроен, но функция возвращается немедленно, вызывая передачу. Я предполагаю, что загрузка происходит менее чем за 3 секунды, в результате чего новое изображение появляется до завершения анимации.

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

if (userImage) {
  userImage.fadeOut(1500, function() {
    ajaxSpinner.fadeIn(1500, function(){
        //now trigger the upload and you don't need the before submit anymore
    });
  });
}
else {
   // trigger the upload right away
}

Answer 2

Несмотря на то, что обратный вызов beforeSubmit вызывается перед отправкой формы, функция userImage.fadeOut является синхронной (то есть она порождает отдельный поток выполнения для выполнения анимации затухания, затем продолжает выполнение) и немедленно возвращается. Анимация затухания занимает 1,5 секунды, и когда вы работаете на localhost, ответ ajax возвращается быстрее, чем 1,5 секунды, и, следовательно, вы не увидите анимацию, в реальных приложениях маловероятно, что запросы ajax будут занимать менее 1,5 секунд , так что вы хороши:)