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

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

Answer 1

你似乎最终等待等待某些动画的promise()，但是你从DOM中移除了一些这些对象，然后他们的动画永远不会完成，所以承诺永远不会解决。

请参阅.promise()的jQuery文档中的这句话：

注意：返回的Promise链接到存储在其上的Deferred对象元素的.data（）。由于.remove（）方法删除了元素的数据以及元素本身，它将阻止任何元素解决的未解决的承诺。如果有必要的话要在解析Promise之前从DOM中删除元素，请使用 .detach（）代替并在解析后跟随.removeData（）。

对于要从DOM中删除的任何项目，一次快速破解可能是最高呼叫.stop(true)。

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

所有动画完成后，clearInterval（）和setInterval（）

1 个答案: