Question

我有这个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;
                            }
                        });
                    }
                });
    }
}

所以在这一点上，我已经定义了我需要的一切，然后我这样做了：

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

再次，假设一切都以正确的顺序发生。实际的类更复杂，在正确的时间之前不会调用任何东西。我使用Firebug来完成所有操作，现在我所拥有的是pageManager.firstRender ();之后的64个绿点，这就是我想要的。当我拨打pageManager.updateDigitals ();时，我会看到前32个点保持绿色，接下来的32个点变成红色。我已经看到内部代码一切正常，甚至到DigitalChannel.updateState (newState);实际改变svgImage圆的颜色的点;但是，只有最后一个点在视觉上会改变颜色。我为这么长的问题道歉，但是有人知道为什么吗？

Answer 1

可能是因为未在DigitalChannel中定义了self.normalState吗？

Answer 2

原来，这是一个时间问题。创建可以保存Raphael文件然后立即创建文件的HTML会导致一些事情变得混乱，所以我在文件创建中加入了延迟，现在一切正常。

更新许多Raphael论文

2 个答案: