javascript - jQuery animate 触发 .complete 回调 5 次

Question

无法发现我的错误。请帮忙找出为什么动画回调会多次触发。

下面的代码从上到下滚动文本 block 。 animate 的“step”移动自定义滚动条...

currentText.stop().animate({
                top: "-"+textHeight+"px"}, 
                {   
                    duration: durationOfAutoScroll, 
                    step: function(currentTop) {  
                        var positionY = currentTop;
                        if (positionY < curState.maskHeight - curState.textHeight) positionY = curState.maskHeight - curState.textHeight;
                        if (positionY > 0) positionY = 0;
                        var scrollPosition = -positionY * curState.scrollHeight / (curState.textHeight - curState.maskHeight);
                        curState.scrollerTop = scrollPosition;
                        $(".news-text .scroll-bar .scroller").css("top", scrollPosition);
                    },
                    complete: function() {
                        //jQuery.dequeue(currentText);
                        currentText.attr("data-state", 0);
                        onEndScroll();
                }
            }
            ); 

Answer 1

这意味着您的集合 (currentText) 有 5 个元素，每个元素都会触发一次回调，这是预期的行为。

如果这不是您想要的，您可以创建一个 Promise 对象并使用 done 方法:

currentText.stop().animate({
    top: "..."
}, {
    duration: '...',
    step: function () {
      // ...
    },
}).promise().done(function () {
    // done
});