为什么jQuery的.animate（）在完成动画之前运行“ complete”功能？

Question

I'm seeing this asked several places but most either give a work-around or the person's code doesn't prove the point. I'm not really planning on scrolling down every pixel at 1 milisecond per pixel using jQuery .annimate(), but just to demonstrate the problem, here's my code:

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);});
         }
      }
   }
}

If you copy and paste it into the Chrome console, and run it like so: scrollMore("#itemId"), the window will only scroll down about 5 pixel, whilst it should scroll down 100.

Uncommenting the console.log will reveal that it runs through like this: pixel 0 once, pixel 1 four times, 2 eight times, 3 sixteen times, four 32 times, five 37 times; totaling 98 times.

I also tried with this syntax in the if, and it gave me the same results:

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

I realise that I can use the following code to scroll to an item by ID, but my item moves on scroll, so it ends up scrolling to the wrong place.

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

So the question is, Why does jQuery run the "complete" function BEFORE it completes the animation when the documentation explicitly states that it runs after? And, of course, what can I do about it?

Answer 1

I ran into a similar problem a few weeks ago. When you try to animate multiple elements using syntax like $('html, body').animate(); jQuery actually fires the animate function for both elements separately. Meaning that the callback parameter you added, function(){scrollMore(id)} , is actually called twice. That means when html is done animating it'll fire off it's callback before the body 's animation is even finished and then the body 's callback will fire as well once it's done its thing. I believe that's where those multiple unexpected console logs are coming from.

There's several ways to get around this but I'd say the easiest is to create a variable that tells the callbacks whether one has been fired or not. Something like:

var animated = false;

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

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

       }
    }
);