javascript - 绘制简单 SVG 路径的脚本会降低整个 PC 的速度

Question

我有一个用于 Web 元素的基于 svg 的加载动画，它在悬停时绘制 360° 弧形。这大约需要 0.8 秒才能完成。之后一个容器滑入，看我的 fiddle :http://jsfiddle.net/s2XCL/2/

        function drawCircle(arc) {
            var i = 0;
            var circle = document.getElementById(arc);
            var angle = 0;
            var radius = 75;
            window.timer = window.setInterval(

            function () {
                angle -= 5;
                angle %= 360;
                var radians = (angle / 180) * Math.PI;
                var x = 200 + Math.cos(radians) * radius;
                var y = 200 + Math.sin(radians) * radius;
                var e = circle.getAttribute("d");
                if (i === 0) {
                    var d = e + " M " + x + " " + y;
                } else {
                    var d = e + " L " + x + " " + y;
                }
                circle.setAttribute("d", d);
                i++;
            }, 10);


        }

        function removeCircle() {
          //  var circle = document.getElementById(arc);
          //  circle.style.display = "none";
        }

该函数在 HTML 标记的 svg 标签内调用:

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid" style="width:400px; height:400px;" onmouseover="drawCircle('arc2'); removeCircle();">
            <path d="M200,200 " id="arc2" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="5"></path>
        </svg>

这按预期工作，但在我的两台测试机器上占用了整个 3 GHz 核心。我目前正在学习JS，所以我只能猜测是什么导致了性能不足。

我还希望 svg 在完成动画或鼠标离开容器后消失，所以如果有人得到提示，那就太好了。

---

对于所有 google 同事，请参阅此处 http://jsfiddle.net/s2XCL/4/为解决方案。也可以随意使用该代码段。

Answer 1

问题是您永远不会清除超时。这将使您的计时器继续运行，并且每次您将鼠标移动到 svg 元素上方时，它都会继续创建新的计时器。这意味着，如果您将鼠标移动的时间过长，它会不断向 path 标记中添加越来越多的内容，并且会造成很大的延迟。

要解决此问题，只需为全局 timer 变量添加一个 clearInterval:

clearInterval(timer);

您还需要通过将事件处理程序更改为 mouseenter 来确保它仅在您最初将鼠标移到 svg 顶部时运行，而不是每次在其中移动时运行，而不是鼠标移动。最后，您需要清除路径的 d 属性，否则圆圈永远不会被删除。

该函数将具有以下内容:( http://jsfiddle.net/s2XCL/3/ )

clearInterval(window.timer||0); //clear the previous timer, or "timer 0" (nonexistent) when it's not defined yet
circle.setAttribute("d", "M200,200 "); //reset d attribute to default

window.timer = window.setInterval(//interval