4

this my code calling my animateRotate function. Internally it basically just calls $.animate. But have a look yourself:

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

    rotate();
})();

Here is my animateRotate function:

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

At first I thought it was pretty obvious what is happening. I'm calling rotate again as soon as the animation ends to start the animation again. But upon further investigation I found out that rotate exits immediately since animateRotate does its work asynchonously. So I'm not sure why the stack should be building up.

I already found a solution, but I'm not sure why it works and would like to know why it does. This solution came to my mind when I thought the problem was the rotate function not exiting. But the function exits just fine.

As soon as I wrap the rotate call in the complete callback function in a setTimeout it works just well.

So now I'm here. With a solution that works but I'm not happy with since I don't understand it.

Can someone tell me whats going on?

Edit: Just put everything together in a fiddle. Unfortunately it works there: jsfiddle.net/hq07gucy

Another thing I noticed: It seems to crash immediately for me when I switch tabs. So if I leave the tab doing the animation, it will exceed max stack size immediately when I come back. Any ideas on that? Heres the message in detail: https://pastebin.com/BqGVtpc4

This is what the Chrome Perfromance Profiler shows when I focus the tab again: Chrome Performance Profiler

This goes all the way down. But I'm not quite understanding what is happening.

M. Folte
  • 111
  • 2
  • 8
  • I'm not sure where `$obj` comes from in your code, but assuming by the plural that `$motorblades` represents more than one element and that `complete` is called for each individual element in that selection, the first that finishes its animation might restart animating **all** of them, including ones that didn't finish. Not sure why the timeout solves this, though, you could add logs to check this out – Kaddath Mar 13 '19 at 09:09
  • Could you create a Minimal, Complete, and Verifiable example? to show what `$motorblades` and `$obj` are. – wbarton Mar 13 '19 at 09:11
  • Good idea. Unfortunately `$motorblades` is a single object (a SVG graphic). It's only named in plural since the graphic shows multiple blades. – M. Folte Mar 13 '19 at 09:12
  • I'll try to set it up in a JS-Fiddle. Give me a minute. – M. Folte Mar 13 '19 at 09:13
  • 1
    Huh. I put everything together in a fiddle and it works. Thats unfortunate. https://jsfiddle.net/hq07gucy/ Normally the error message occurs after about a minute. – M. Folte Mar 13 '19 at 09:32
  • Another thing I noticed: It seems to crash immediately for me when I switch tabs. So if I leave the tab doing the animation, it will exceed max stack size immediately when I come back. Any ideas on that? Heres a link to the detailed message: https://pastebin.com/BqGVtpc4 – M. Folte Mar 13 '19 at 09:41
  • This answer: https://stackoverflow.com/a/6095695/10104361 explains a reason for the error. But, I haven't replicated your issue. Just for a different approach, it the initial problem was to animate that particular element (`.motorblades`) infinitely you could use a CSS animation: https://jsfiddle.net/wbarton/phcub8z2/ – wbarton Mar 13 '19 at 10:27

0 Answers0