jQuery animate回调提前触发问题及Rails中Bootstrap4进度条实现咨询

首先，先把你当前的代码整理出来，方便排查问题：

<div class='progress' style='height: 1.5px;'>
  <div class='progress-bar' role='progressbar' style='width: 0%;' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'>
  </div>
</div>

$(document).ajaxStart(function(event) {
  $('.progress-bar').animate({ width: '87%' }, ... // 你的回调在这里提前触发了
});

接下来，我帮你分析几种常见的原因和对应的解决方案：

1. 动画队列堆积导致回调混乱 #

如果页面存在多次AJAX请求，或者之前的动画还没完成就触发了新的动画，会造成动画队列堆积，进而导致回调提前触发。解决办法是在启动新动画前，先停止当前元素的所有未完成动画：

$(document).ajaxStart(function(event) {
  // stop(true, false) 清空动画队列，不跳转到当前动画的结束状态
  $('.progress-bar').stop(true, false).animate({ width: '87%' }, {
    duration: 1500, // 明确指定动画时长，避免默认过快引发的回调异常
    complete: function() {
      // 这里的回调只会在本次动画真正完成后触发
      console.log("进度条动画完成！");
    }
  });
});

2. AJAX事件重复绑定 #

如果你的脚本被重复执行（比如放在动态加载的模板里，或者多次调用ready函数），会导致ajaxStart事件被多次绑定，每次AJAX请求都会触发多个动画，回调也会被多次执行。解决办法是绑定前先移除旧的绑定：

// 先移除之前的ajaxStart绑定，避免重复触发
$(document).off('ajaxStart').on('ajaxStart', function(event) {
  $('.progress-bar').stop(true, false).animate({ width: '87%' }, {
    duration: 1500,
    complete: function() {
      console.log("进度条动画完成！");
    }
  });
});

3. 同步更新ARIA属性（可选但推荐） #

既然用了Bootstrap的进度条，记得在动画过程中同步更新aria-valuenow属性，既符合无障碍设计标准，也能避免属性与视觉状态不一致的问题：

$(document).ajaxStart(function(event) {
  $('.progress-bar').stop(true, false).animate({ width: '87%' }, {
    duration: 1500,
    // step函数会在动画的每一帧触发，实时更新aria值
    step: function(currentWidth) {
      $(this).attr('aria-valuenow', Math.round(currentWidth));
    },
    complete: function() {
      $(this).attr('aria-valuenow', 87);
      console.log("进度条动画完成！");
    }
  });
});

4. 处理AJAX完成后的收尾逻辑 #

通常我们会在AJAX请求完成后把进度条拉到100%，这时候也要注意避免和之前的动画冲突：

$(document).ajaxStop(function() {
  $('.progress-bar').stop(true, false).animate({ width: '100%' }, 300, function() {
    // 动画完成后可以隐藏进度条，或者重置状态
    setTimeout(() => {
      $(this).css('width', '0%').attr('aria-valuenow', 0);
      $(this).parent().fadeOut();
    }, 500);
  });
});

试试上面的方案，应该能解决回调提前触发的问题。如果还有疑问，可以告诉我你的完整回调代码和AJAX请求细节，我再帮你进一步排查~

内容的提问来源于stack exchange，提问作者dhaliman