javascript - 当所有动画完成时的clearInterval()和setInterval()

Question

我有一个使用 setInterval 重复调用的函数来创建动画。如果仍有动画在运行，我需要它停止调用该函数，直到所有动画完成。我使用的代码如下:

编辑:在我从 DOM 中删除动画元素的地方添加了编码，这是问题所在吗？

var serviceLoop = setInterval(serviceQueue, LOOP_POLL_MS); //10 ms

function serviceQueue()
{
       //do some animations..
       function moveMan(from, to, plane)
      {
        (function() {

            var tmp_from = from;
            var tmp_to = to;
            var tmp_plane = plane;
            var pos = tmp_from.offset();
            var temp = tmp_from.clone(true);

            temp.css({ "visibility":"visible",
                "position":"absolute",
                "top":pos.top + "px",
                "left":pos.left + "px"});
           temp.appendTo("body");
           tmp_from.css("visibility", "hidden");
        //if (!tmp_plane) tmp_to.css("visibility", "hidden");
           temp.animate(to.offset(), moveMan.ANIMATION_TIME, function() {
                tmp_to.css("visibility", "visible");
                temp.remove();
           });
       })();
     }
       if ($(":animated").length > 0)
        {
            clearInterval(serviceLoop);
            $(":animated").promise().done(function() {
                serviceLoop = setInterval(serviceQueue, LOOP_POLL_MS);
            });
        }
}

我遇到的问题是在几个动画之后，传递给 did() 的函数永远不会被调用，并且脚本停止。

Answer 1

您最终可能会等待一个正在等待某些动画的 promise() ，但随后您从 DOM 中删除了其中一些对象，然后它们的动画永远不会完成，因此该 promise 永远不会解决。

请参阅 jQuery 文档中关于 .promise() 的引用:

Note: The returned Promise is linked to a Deferred object stored on the .data() for an element. Since the.remove() method removes the element's data as well as the element itself, it will prevent any of the element's unresolved Promises from resolving. If it is necessary to remove an element from the DOM before its Promise is resolved, use .detach() instead and follow with .removeData() after resolution.

一个快速技巧可能是对要从 DOM 中删除的任何项目进行顶部调用 .stop(true) 。

一般来说，需要重写这段代码，以避免这种可能性，并希望重新思考如何处理每 10 毫秒想要执行的操作，因为这通常是一个糟糕的设计。您应该使用事件来触发更改，而不是 10 毫秒的轮询操作。您尚未解释此代码的用途，因此我不清楚建议的替代方案。