Почему моя анимация завершения jQuery вызывает превышение максимального размера стека? - PullRequest
Новая
       24

Почему моя анимация завершения jQuery вызывает превышение максимального размера стека?

4 голосов
/ 13 марта 2019

это мой код, вызывающий мою функцию animateRotate. Внутренне это в основном просто вызывает $ .animate. Но посмотрите сами: 

(function () {
    function rotate() {
        $motorblades.animateRotate(0, 360, 3000, { x: 117, y: 117 }, "linear", function () {
            if ($obj.attr("animate") == "true") {
                rotate();
            }
        });
    };

    rotate();
})();

Вот моя функция animateRotate: 

$.fn.animateRotate = function (startAngle, endAngle, duration, origin, easing, complete) {
    return this.each(function () {
        var elem = $(this),
            orig = typeof origin !== "undefined" ? origin : {x:0, y:0};

        $({ deg: startAngle }).animate({ deg: endAngle }, {
            duration: duration,
            easing: easing,
            step: function (now) {
                elem.attr("transform", "rotate(" + now + " " + orig.x + " " + orig.y + ")");
            },
            complete: complete || $.noop
        });
    });
};

Сначала я подумал, что это довольно очевидно, что происходит. Я снова звоню rotate, как только заканчивается анимация, чтобы снова запустить анимацию. Но при дальнейшем расследовании я обнаружил, что rotate выходит немедленно, поскольку animateRotate выполняет свою работу асинхронно. Поэтому я не уверен, почему стек должен накапливаться.

Я уже нашел решение, но я не уверен, почему оно работает, и хотел бы знать, почему оно работает. Это решение пришло мне в голову, когда я подумал, что проблема в том, что функция поворота не завершается. Но функция выходит просто отлично.

Как только я завершаю вызов rotate в функцию полного обратного вызова в setTimeout, она работает просто хорошо.

Так что теперь я здесь. С решением, которое работает, но я не доволен, так как я не понимаю его.

Может кто-нибудь сказать мне, что происходит?

Редактировать: Просто сложите все в скрипку. К сожалению, это работает там: jsfiddle.net/hq07gucy

Еще одна вещь, которую я заметил: мне кажется, что она сразу падает, когда я переключаю вкладки. Поэтому, если я оставлю вкладку во время анимации, она сразу превысит максимальный размер стека, когда я вернусь. Есть идеи по этому поводу? Вот сообщение в деталях: https://pastebin.com/BqGVtpc4

Вот что показывает Chrome Perfromance Profiler, когда я снова фокусирую вкладку: Chrome Performance Profiler

Это идет до самого конца. Но я не совсем понимаю, что происходит.

...