Question

我正在使用jQuery Form插件上传图片。我已经为beforeSubmit回调分配了一个淡入淡出动画，但由于我在本地运行，因此在调用success函数之前没有时间完成。

我在fade();调用中使用回调函数来确保在下一个淡入淡出开始之前完成一个淡入淡出，但这似乎并不能保证调用它的函数完成。

我做错了吗？在提交ajax呼叫之前，beforeSubmit不应该完成吗？

以下是两个回调：

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秒，导致新动画完成之前出现新图像。

所以，如果你真的想要这个效果，那么你需要做一下fadeout，spinner fadein，一旦完成触发上传。像这样：

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秒，所以你很好：）

在jQuery Form中，在'beforeSubmit'完成之前调用'success'

2 个答案: