javascript - D3拖动事件触发的频率是多少？

Question

我有一个关于拖动的非常普遍的低级问题。我特别有兴趣了解 D3.js v4 中何时触发拖动事件的确切决定因素。例如，如果我非常缓慢地移动拖动的对象，则拖动事件将触发我移动的每个像素。但是，如果我移动得相当快，则不会以与我移动的像素量一对一的相关性来触发拖动事件。

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

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

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

Answer 1

您看到的问题与 D3 关系不大，这是一般的 JavaScript 行为，或者更好的是，与浏览器相关的行为:您看到的是 mousemove 的一项功能。

如果你看D3 API ，您会看到“拖动”事件使用 mousemove (或 touchmove 对于触摸设备):

drag - after an active pointer moves (on mousemove or touchmove).

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

所以，如果我们假设(只是为了简化)浏览器生成 mousemove每 100 毫秒发生一次事件，您对所描述的行为有一个简单的解释:

鉴于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>