当stop()遇到animate()的回调函数

animate()方法是jquery中自定义动画的方法，是js动画。在animate()方法里，可以有一个回调函数，这个回调函数在动画执行完之后执行。

而stop()方法是停止当前元素的当前动画队列里面的动画，举个栗子：

  //给向右移动添加事件
        $(".mid-img>.to-right").on("click", function () {


            //变化偏移量和图片index
            if(self.img_index==self.img_num){
                //此处是当图片为最后一张的时候的时候，改变是不一样的
                //self.left_index=self.left_index-1004;
                //var index_temp=0+2;
                //
                //$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){
                //
                //    //这个做法可取么？？？如果使用到stop来停止函数的话，这个是不可取的，因为只要点击了，就一定要有位移
                //    //这个是位移后立马变回的。s
                //    //这个是位移后立马变回的。
                //    self.left_index=(0-index_temp)*1004;
                //    self.img_index=0;
                //    $(".go_span:first").css({left:self.left_index+"px"});
                //    $(".index-header>li:eq("+self.img_index+")").addClass("li-red-bg");
                //    $(".index-header>li:eq("+self.img_index+")").siblings().removeClass("li-red-bg");
                //
                //
                //});
                //
                //
                修改标题的文字------------------
                //var title=$(".go_span>a:eq("+index_temp+")").prop("title");
                //$(".mid-img>.bottom-text").text(title);


                $(".go_span:first").stop();


            }else {
                self.img_index=self.img_index+1;
                self.left_index=self.left_index-1004;
                self.go();
            }

        });

在这里，如果是最后一张我，再点击的时候，就stop();可以看到效果如下：

可以看到，轮播图停在30张过渡到31张这里，因为img_index先变为31,在过渡切换图片的，所以在切换过程中，我点击触发了stop();所以animate()的过程就卡在那里了。那为什么animate()前面添加stop()不会看到卡壳停顿呢，因为stop()后，它又立刻执行animate(),有有动画执行，所以看起来是没有卡壳的。

 

如果在animate()之前不加stop的话，狂点轮播图的下一张图片，就会发现，下一张图片，等你的鼠标停止点了，轮播图还在一张一张地切换图片，这就是因为，当前元素的上一个动画还没完成，又触发了一个动画的话，这个动画就会放在队列（还是动画栈）里面，反正不会立即执行。

但是如果在animate之前加上stop()的话，在执行animate之前stop()会停止当前元素正在执行的动画，并且立马执行animate()里面的动画。但是这个正在执行的动画是算执行了，，还是算没有执行呢？他的回调函数，会不会触发呢？

这个真在执行的动画是算执行了，只要有开始执行的动画，就算被执行了，也会触发回调函数，只是回调函数不是立即执行，而是在接手的动画结束之后执行的；就相当于被停止的动画，和下一个动画，融合成了一个动画，所以回调函数在下一个动画结束后执行：举个栗子，animate() A . 点击触发stop()。animate() B;  这个时候A停止了么，变成了动画AB,A的回调函数在动画AB执行后触发，那如果animate()B本身又自带一个回调函数呢，那是那个回调函数先触发，那来做一个测试，代码 如下：

go:function(){
        var self=this;

        console.log(this.img_index);

        //获取要滚动的span,并滚动
            var remenber_img_index=self.img_index;
        $(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){

            console.log(remenber_img_index);

        });

        var index_temp=this.img_index+2;
        //修改标题的文字------------------此处加儿
        var title=$(".go_span>a:eq("+index_temp+")").prop("title");

        $(".mid-img>.bottom-text").text(title);
        $(".index-header>li:eq("+this.img_index+")").addClass("li-red-bg");
        $(".index-header>li:eq("+this.img_index+")").siblings().removeClass("li-red-bg");


    },

在1-31之间的animate();中添加一个对调函数用来打印当前的索引img_index,用一个临时变量remenber_img_index来存储。打印的结果如下：

可以看出，是A的回调函数先执行，B的回调函数后执行。其实即使把他们的回调函数都放在同一队列（或栈）里面。跟其他的回调函数一样，先触发的先执行。嗯，就是这样的

 

转载于:https://www.cnblogs.com/thonus/p/6066687.html