Two.JS :在尝试删除从SVG中解释的形状时，未能在“节点”上执行“removeChild”

Question

我使用Two.JS将形状呈现到使用Two.js解释方法从SVG解释的阶段。

它们增加了一个生存期属性，在两个呈现循环中，我检查插图并在时间结束时删除它。

这在大多数情况下(>99%)都是有效的，但有时形状会被卡住，我得到了以下错误：

Uncaught :在‘node’上执行'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的，而不是与形状。形状和解释的形状都返回two.polygon对象，因此这看起来很奇怪。

我可以想到的一件事是，two.js使用它解释为多边形id的元素的id，如果有两个具有相同id的元素，则在尝试删除时会导致错误。但是，每次alreadyIllustration检查似乎都是正确的，如果有任何存在的话，就停止添加插图。

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

非常感谢。

Answer 1

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

插图已从数组中删除，但在窗口重新聚焦之前不会从DOM中删除，这意味着将通过检查，并显示具有相同ID的同一插图的多个实例。

为了阻止问题的发生，当窗口没有焦点时，我禁用了事件，所以在窗口恢复焦点之前，不能显示新的插图。