Javascript window.requestAnimationFrame在调整大小和重新加载脚本时速度更快

我正在尝试设置一些线条的动画，它与window.requestAnimationFrame的预期效果一样。但是，一旦用户调整窗口大小，这些线就需要重新定位。为此，我使用脚本重新初始化页面上的Javascript（删除脚本标记并再次附加它）。另一种方法是清空SVG html并重新绘制行

请参阅此提琴以获得澄清：

如您所见，动画正在运行，但使用以下脚本，我正在尝试重新加载在调整窗口大小时执行此动画的脚本（无法在小提琴上执行此操作，但它会搜索ID为relscr的javascript标记）：

嗯，每次我调整窗口的大小，动画都会变得更快。它不是随机速度变量，而是window.requestAnimationFrame函数，它触发double或其他什么，使动画在每次调整大小时都加速

---

我完全糊涂了，我希望这个问题尽快解决。非常感谢您的帮助。

“我正在尝试重新加载在调整大小时制作此动画的脚本”-这是第一个错误。您只需在脚本中有一个可以调用的函数，并在调整大小时再次调用。无需重新加载任何内容即可将其重新设置为值。启动新动画时，您不会停止旧动画，因此有两个动画正在进行-这使您看起来速度加倍，因为每次的步数是原来的两倍。“我正在尝试重新加载在调整大小时执行此动画的脚本”-这是第一个错误。您只需在脚本中有一个可以调用的函数，并在调整大小时再次调用。无需重新加载任何内容即可使其重新生效。在启动新动画时，您不会停止旧动画，因此您有两个动画正在进行-这使您看起来速度加倍，因为您每次的步数是原来的两倍。

(function (w, d) {
    "use strict";

    Element.prototype.remove = function() {
        this.parentElement.removeChild(this);
    }
    NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
        for(var i = this.length - 1; i >= 0; i--) {
            if(this[i] && this[i].parentElement) {
                this[i].parentElement.removeChild(this[i]);
            }
        }
    }

    var timeout = null,
        scriptEl = document.getElementById('relscr'),
        scriptSrc = scriptEl.src,
        delay = 200;

    w.onresize = function () {
        w.clearTimeout(timeout);

        timeout = w.setTimeout(function () {
            scriptEl.remove();
            document.getElementById('sectionAnimationSVG').innerHTML = "";
            scriptEl = d.createElement('script');
            scriptEl.type = 'text/javascript';
            scriptEl.src = scriptSrc + '?_=' + (new Date().getTime());
            document.getElementsByTagName('foot')[0].appendChild(scriptEl);
        }, delay);
    };
})(window, document);