Question

我正在使用Two.JS将形状呈现到舞台上，这些形状是使用Two.js解释方法从SVG解释的。

这些属性添加了生命周期属性，在Two的渲染循环中，我检查插图并在时间结束时将其删除。

这大部分时间都在工作（> 99％），但偶尔形状会卡住，我会收到此错误：

未捕获NotFoundError：无法在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。

showIllustration: (which) =>
    alreadyIllustration = false
    for shape, i in @_shapes
        if shape.isIllustration is true
            alreadyIllustration = true

    if alreadyIllustration is false
        switch which
            when 'food'
                if Math.random() > 0.49
                    id = 'currywurst'
                else
                    id = 'pretzel'
            when 'mascot'
                if Math.random() > 0.49
                    id = 'ample'
                else
                    id = 'bear'
            when 'landmark'
                if Math.random() > 0.49
                    id = 'tower'
                else
                    id = 'tor'

        illustration = @_two.interpret document.getElementById id
        illustration.center().translation.set @_two.width / 2, @_two.height / 2
        @_foreGround.add illustration
        illustration.lifeSpan = 100
        illustration.creationTime = new Date().getTime()
        illustration.isIllustration = true
        @_shapes.push illustration

这是我的循环删除插图：

removeShapes: () =>
    time = new Date().getTime()
    for shape, i in @_shapes by -1
        if shape.lifeSpan
            if time - shape.creationTime >= shape.lifeSpan
                shape.remove()
                @_shapes.splice i, 1

这是发生错误的two.js中的相关代码。

removeChild: function(id) {
        var elem = this.domElement.querySelector('#' + id);
        if (elem) {
          this.elem.removeChild(elem);
        }
      },

这只发生在解释的svg上，而不是形状。形状和解释的形状都返回两个.polygon对象，所以这看起来很奇怪。

我能想到的一件事是，two.js使用它所解释的元素的id作为多边形的id，如果有两个具有相同id的元素，则在尝试删除时会导致错误。但是，如果存在任何现有的插图，那么每次插入检查似乎都能正常工作。

我也尝试将id设置为创建时间而不是元素的id，因此每次都是唯一的，但这会导致其他问题和错误。

非常感谢。

Answer 1

这不是一个完整的解决方案，但我发现问题与窗口上的模糊/淡入淡出事件以及Chrome处理此问题的方式有关。当窗口没有聚焦时，似乎发生了错误，并且触发了当前显示的相同插图。

插图已从数组中删除但未从DOM中删除，直到窗口重新聚焦为止，这意味着检查将通过，并显示具有相同ID的相同插图的多个实例。

为了阻止问题的发生，我在窗口没有聚焦时禁用了事件，因此在窗口重新聚焦之前不能显示新的插图。

Two.JS：＆＃39;无法执行＆＃39; removeChild＆＃39;在＆＃39; Node＆＃39;当试图删除从SVG解释的形状

1 个答案: