javascript - Rails 3 UJS 在等待 ajax:callback 时运行一个 while 循环

Question

:remote => true这是我用于表单的 javascript 。

目前，当提交表单时，该函数运行一次。（宽度增加 5%。

但是，我希望这个动画循环运行，以便宽度以 5% 的增量不断增加，直到我得到一个 ajax:success 或一个 ajax:failure 回调，此时我想跳转到另一个函数。

$('#new_message').bind('ajax:loading', function() {
  $('#send_bar').animate({
    width: '+=5%'
  });
});

Answer 1

声明一个运行动画的函数，然后在完成参数中，传递该函数，使其递归调用自身：

var start_animation = function() {
  $('#send_bar').animate({width: '+=5%'}, 5000, 'linear', start_animation);
}

在加载函数中，调用该函数开始动画：

$('#new_message').bind('ajax:loading', function() {
  start_animation();
});

然后在绑定到 ajax:success 和 ajax:failure 时，调用stop：

$('#new_message').bind('ajax:success', function() {
  $('#send_bar').stop();
});

$('#new_message').bind('ajax:failure', function() {
  $('#send_bar').stop();
});