D3 拖动事件多久触发一次？

Question

我有一个关于拖动的非常笼统的低级问题。我特别有兴趣了解究竟是什么决定了在 D3.js v4 中何时触发拖动事件。例如，如果我非常缓慢地移动拖动的对象，拖动事件将触发我移动的每个像素。但是，如果我移动得相当快，拖动事件不会与我移动的像素数量一一对应地触发。

我目前正在研究这个问题，主要是使用 Chrome 开发性能选项卡；我认为这将（希望）给我一些见识。我也知道有一些去抖动功能可以限制事件被调用的次数；但是，我不知道或看到 D3 有这个。我认为减少对拖动的调用的原因可能与 Chrome 内部的某些东西有关，也许它只是使用某种算法根据鼠标移动的速度来调用拖动。这似乎是最有可能的答案，但如果有人能给我一些关于这种行为是如何确定的见解，我将不胜感激。

最后一件事：我还知道，有时当您快速移动鼠标光标以使其“退出”您正在拖动的对象时，不应调用拖动事件。但是，即使我没有“离开”我正在拖动的对象，根据我移动鼠标光标的速度，对拖动的调用仍然更少。

附言当我使用 D3 时，这个问题很可能只是一般与拖动有关，而不是特定于 D3...

Answer 1

您看到的问题与 D3 几乎没有关系，它是一般的 JavaScript 行为，或者更好的是，与浏览器相关的行为：您看到的是 mousemove 的一个特性。

如果您查看D3 API，您会看到“拖动”事件使用mousemove（或touchmove 用于触摸设备）：

拖动 - 在活动指针移动后（在 mousemove 或 touchmove 上）。

现在是重要信息：mousemove 是由浏览器生成的。更重要的是，浏览器没有义务以任何特定的速率生成事件，无论是与距离还是时间有关。此外，其他因素可能会影响mousemove 的频率，例如您使用的硬件。

因此，如果我们假设（只是为了简化）浏览器每 100 毫秒生成一个 mousemove 事件，那么您对所描述的行为有一个简单的解释：

鉴于speed = distance / time，如果您将鼠标移动得更快，则从 A 点到 B 点的事件会更少（也就是说，从 mousemove 事件到下一个事件的距离会更大）。如果您将鼠标移动得较慢，则从 A 点到 B 点的事件会更多（也就是说，从 mousemove 事件到下一个事件的距离会更小）。如果您以小于 1 像素/100 毫秒的速度移动鼠标（在我们的假设场景中），则每个像素将有 1 个事件。

最后，这是一个非常简单的演示。单击并拖动 SVG 中的任意位置：

var count = 0;
d3.select("svg").call(d3.drag().on("start", function() {
  console.log("drag started")
}).on("drag", function() {
  ++count; 
  console.log("drag event " + count)
}).on("end", function() {
  count = 0;
  console.log("drag ended")
}))

.as-console-wrapper { max-height: 20% !important;}
svg {
  border: 1px solid black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>