javascript - 防止循环 JavaScript 事件

Question

这个问题恰好涉及D3特有的功能，但不是D3特有的问题。我创建了两个 D3 图表并附加了缩放功能，目标是保持缩放比例和变换位置相等，这样当一个图表缩放时，另一个会自动缩放到相同的比例和位置。为此，我在缩放一个图表时触发自定义事件，以便我可以自动调整另一个图表:

// Within the chart definition:
var svg = ...; // The chart body definition
var zoom =  d3.behavior.zoom()
    .on("zoom", function(e){
        // do stuff...
        $("#chart-div").trigger({
            type: "my.zoom",
            translate: d3.event.translate,
            scale: d3.event.scale
        });
    });
svg.call(zoom);

然后我创建允许我手动调整每个图表缩放级别的方法，在此过程中触发 D3 zoom 事件:

var adjustZoom = function(t,s){
    svg.transition().duration(500).call(zoom.scale(s).translate(t).event);
};

然后我将事件监听器附加到我的每个图表，这样当我与其中一个交互并导致其缩放级别发生变化时，另一个会自动更新:

$("#chart-div1").on("my.zoom", function(e){
    chart2.adjustZoom(e.translate, e.scale);
});
$("#chart-div2").on("my.zoom", function(e){
    chart1.adjustZoom(e.translate, e.scale);
});

明显的问题是调用 adjustZoom 方法会触发 D3 zoom 事件，因此在两个图表上附加事件监听器会创建周期性事件，因为每个图表都会尝试调整另一个无限。

1. chart1 [manual zoom]      --> trigger d3.zoom --> triggers my.zoom
2. chart2 [my.zoom listener] --> trigger d3.zoom --> triggers my.zoom
3. chart1 [my.zoom listener] --> trigger d3.zoom --> triggers my.zoom
etc...

我想实现的是一种在决定触发另一个 my.zoom 事件时检查 my.zoom 事件是否已经被触发的方法，以防止事件的循环触发(阻止上面示例中的第 3 步)，但我不知道该怎么做。无论如何，函数或事件是否可以知道触发它的事件然后自行停止？

Answer 1

如果 translate 和 scale 不是模糊值，我想到的第一个选项是使用当前值调用 adjustZoom translate 和 scale 无操作。因此，如果 chart1 的值发生变化，它会引发事件，更改 chart2 的值，然后 chart2 引发事件，但 chart1 会打破循环，因为它的 translate 和 scale 已经是这些值。

另一种选择是在事件中传递更改的源元素，然后如果是启动它的图表则不在图表上触发它。

例如，触发时:

$("#chart-div").trigger({
    type: "my.zoom",
    translate: d3.event.translate,
    scale: d3.event.scale,
    source: this              // <=== The new bit
});

然后在处理的时候:

if (chart2[0] !== e.source) {
    chart2.adjustZoom(e.translate, e.scale);
}

请注意，该代码示例假定 chart1 和 chart2 是围绕单个元素的 jQuery 包装器；如果不是，则相应地进行调整。