javascript - 为什么 jQuery 的 .animate() 在完成动画之前运行 "complete"函数？

Question

我在几个地方看到了这个问题，但大多数要么给出了解决方法，要么这个人的代码并不能证明这一点。我并不真正打算使用 jQuery .annimate() 以每像素 1 毫秒的速度向下滚动每个像素，但只是为了演示问题，这是我的代码:

window.stopscrolling = 0;

function scrollMore(id) {
   stopscrolling++;
   if (stopscrolling < 100) {
      var y = $(window).scrollTop();
      if ($("#"+id).offset().top != y){
         //console.log(y);
         if ($("#"+id).offset().top > y) {
             $('html, body').animate({
                scrollTop: y+1
             }, 1, "linear", function(){scrollMore(id);});
         }
         else {
             $('html, body').animate({
                scrollTop: y-1
             }, 1, "linear", function(){scrollMore(id);});
         }
      }
   }
}

如果将其复制并粘贴到 Chrome 控制台中，然后像这样运行:scrollMore("#itemId")，窗口只会向下滚动大约 5 个像素，而它应该向下滚动 100 个像素。

取消console.log的注释会发现它是这样运行的:pixel 0一次，pixel 1四次，2 8次，3 16次，4 32次，5 37次；总计98次。

我还在 if 中尝试使用此语法，它给了我相同的结果:

if ($("#"+id).offset().top > y) {
     $('html, body').animate({
        scrollTop: y+1
     },
     {
        duration : 1,
        easing: "linear",
        complete: function(){scrollMore(id)}
    });
 } 

我意识到我可以使用以下代码通过 ID 滚动到某个项目，但我的项目在滚动时移动，因此它最终滚动到错误的位置。

$('html, body').animate({
    scrollTop: $("#"+id).offset().top
    }, 2000);

所以问题是，为什么 jQuery 在完成动画之前运行“完整”函数，而文档明确指出它在完成之后运行？当然，我能做些什么呢？

Answer 1

几周前我遇到了类似的问题。当您尝试使用 $('html, body').animate(); 等语法为多个元素设置动画时，jQuery 实际上会分别为两个元素触发动画函数。这意味着您添加的回调参数 function(){scrollMore(id)} 实际上被调用了两次。这意味着当 html 完成动画时，它会在 body 的动画完成之前触发回调，然后 body 的动画完成。一旦完成它的工作，回调也会触发。我相信这就是那些多个意外控制台日志的来源。

有几种方法可以解决这个问题，但我想说最简单的方法是创建一个变量来告诉回调函数是否已被解雇。类似于:

var animated = false;

$('html, body').animate({
       scrollTop: y+1
    },
    {
       duration : 1,
       easing: "linear",
       complete: function(){

          if (!animated) {
              animated = true;
              scrollMore(id);
          }

       }
    }
);