window.requestAnimationFrame在调整大小和重新加载脚本时运行得更快

Question

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

请参阅此小提琴以澄清：https://jsfiddle.net/qazc9dnc/

正如您所看到的，动画正在运行，但是使用以下脚本我正在尝试重新加载正在调整窗口大小时执行此动画的脚本（无法在小提琴上运行，但它会搜索一个带有ID relscr的javascript标签：

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

好吧，每次调整窗口大小时动画都会变得更快。它不是随机速度变量，而是window.requestAnimationFrame函数，它触发double或者其他东西，导致每次调整大小时动画都会加速。

我很困惑，我希望尽快解决这个问题。非常感谢您的帮助。