Javascript 更新许多拉斐尔的论文

我将这个Javascript类缩减为必要的部分：

function DigitalChannel ($xmlDoc) {
    var self = this;
    // Parse definition from $xmlDoc

    self.firstRender = function (rootElem) {
        var html = "";  // Build HTML string to display object information
        rootElem.html (rootElem.html () + html);  // Make above HTML visible

        self.paper = Raphael ("digDot" + self.numIndex, 54, 38);
        self.svgImage = self.paper.circle (30, 20, 15).attr ({
            "stroke-width": "2",
            "stroke": "#000000",
            "fill": "#00FF00"
        });
    }

    self.updateStatus = function (newState) {
        self.state = newState;
        if (self.state !== self.normalState) {
            self.svgImage.attr ("fill", "#FF0000");
        }
        else {
            self.svgImage.attr ("fill", "#00FF00");
        }
    }
}

现在，请假设我的方法中使用的所有变量都是从XML数据中正确初始化的，我已经验证了Firebug就是这样。数字通道可以具有0或1的值，也可以具有0或1的正常值。如果当前值与正常值匹配，我希望绘制的圆为绿色，否则为红色。然后我有一节课：

function PageManager () {
    var self = this;
    self.base_url = "http://" + location.hostname + "...";
    self.digital_channels = new Array ();

    var fullPath = self.base_url + "...";
    $.ajax (fullPath,
            {
                type: "post",
                cache: true,
                context: self,
                success: function (data) {
                    $xmlDoc = $($.parseXML (data));
                    $xmlDoc.find ("channel").each (function () {
                        self.digital_channels.push (new DigitalChannel ($(this)));
                    });
                }
            });

    self.firstRender = function () {
          for (i in self.digital_channels) {
              self.digital_channels[i].firstRender ($("#rootElem"));
          }
    }

    self.updateDigitals = function () {
        var fullPath = self.base_url + "...";
        $.ajax (fullPath,
                {
                    type: "post",
                    cache: true,
                    context: self,
                    success = function (data) {
                        var digital_idx = 0;
                        var mask = 0x0001;
                        $xmlDoc = $($.parseXML (data));
                        $xmlDoc.find ("digital_inputs").each (function () {
                            var bits = parseInt ($.trim ($(this).text ()));
                            for (i = 0; i < 32; i++) {
                                self.digital_channels[digital_idx].updateState (bits & mask);
                                bits = bits >>> 1;
                                digital_idx += 1;
                            }
                        });
                    }
                });
    }
}

---

同样，假设一切都按正确的顺序发生。实际的类更加复杂，在正确的时间之前不会调用任何东西。我用Firebug一步一步地完成了所有工作，现在我看到的是pageManager.firstRender；，后面有一个64个绿点的页面；，这就是我想要的。当我调用pageManager.updateDigitals；，我应该看到前32个点保持绿色，下32个点变为红色。我已经看到代码方面的一切在内部都正常了，甚至到了DigitalChannel.updateState；实际更改图像圆的颜色；但是，只有最后一个点在视觉上改变颜色。我很抱歉问了这么长的问题，但是有人知道为什么吗？

可能是因为DigitalChannel中没有定义self.normalState吗？

事实证明这是一个时间问题。创建保存Raphael论文的HTML，然后立即创建论文，导致了一些混乱，因此我在论文创建过程中增加了延迟，现在一切都正常工作。

正如我所说，所有内容都是从XML正确解析的，为了简洁，我省略了它。我可以逐步查看我的JS，并在svgImage变量中正确地计算if/else和fill属性的变化，而不是在屏幕上。加载ajax的XML的内容是什么？这与此无关。XML是正确的。同样，我已经完成了我所有的代码，我所有的代码看起来都正常工作，直到更改Javascript中的fill属性，但是更改不会在屏幕上呈现。好吧！很高兴你能找到解决办法。除了在中使用for x迭代数组外，您的代码似乎没有任何错误。。。所以我认为这是一个错误创建的闭包，因此请求使用xml。添加延迟是一个很好的解决方法，可惜你没有得到修复。

var pageManager = new PageManager ();
pageManager.firstRender ();
pageManager.updateDigitals ();