在动画结束之前调用函数

Function is recalled before end of animation

本文关键字：调用函数动画结束更新时间：2023-09-26

function seite(j, element, callback){
            if (j==0) {$(element).css({"visibility": "hidden"});};
            var ele = $(element).eq(j), str = ele.text(), progress = 0;
            ele.text('');
            $(element).eq(j).css({"visibility": "visible"});
            var timer = setInterval(function() {
                ele.text(str.substring(0, ++progress));
                if (progress >= str.length){
                    clearInterval(timer);
                    if (j==$(element).length) {
                        callback();
                    };
                    $('body').animate({
                        scrollTop: ($(element).eq(j).offset().top)
                    },500);
                    seite(j+1, element, callback);
                }
            }, 10);
        }

这就像同一类元素的打字机一样。问题是在动画结束之前调用seite()，因此动画永远不会停止和滞后。

问题(显示在您自己的答案中(不是延迟回调(它仍然立即运行(。

您需要将调用包装到您的回调中，以匿名函数。

试试这个：

$('body').animate({
    scrollTop: ($(element).eq(j).offset().top),
    done: function(){ seite(j+1, element, callback); }
},500);

或

$('body').animate({
    scrollTop: ($(element).eq(j).offset().top)
},500, function(){ seite(j+1, element, callback); });

找到解决方案(简单的语法错误(：

function seite(i, element, callback) {
window.j = i;
if (window.j == 0) {
    $(element).css({
        "visibility": "hidden"
    });
};
var ele = $(element).eq(window.j),
    str = ele.text(),
    progress = 0;
ele.text('');
$(element).eq(window.j).css({
    "visibility": "visible"
});
var timer = setInterval(function () {
    ele.text(str.substring(0, ++progress));
    if (progress >= str.length) {
        clearInterval(timer);
        if (window.j == $(element).length) {
            callback();
        } else {
            $('body').animate({
                scrollTop: ($(element).eq(window.j).offset().top),
            }, {
                duration: 500,
                complete: function () {
                    seite(window.j + 1, element, callback);
                }
            });
        }
    }
}, 10);

}