0

我正在使用 Two.JS 向舞台渲染形状，这些形状已使用 Two.js 解释方法从 SVG 解释。

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

这在大多数情况下都有效（> 99％），但偶尔形状会卡住并且我收到此错误：

Uncaught 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 上，而不是形状。形状和解释形状都返回 two.polygon 对象，所以这看起来很奇怪。

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

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

非常感谢。

4

1 回答 1

0

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

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

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

于 2014-06-17T06:56:23.157 回答