Question

我有一个关于拖动的非常普遍的低级问题。我特别想知道在D3.js v4中何时触发拖动事件的确切原因。例如，如果我非常缓慢地移动拖动的对象，则拖动事件将触发我移动的每个像素。但是，如果我移动速度相当快，则拖动事件不会与我移动的像素数量一一对应地触发。

我目前正在研究此问题，主要是使用Chrome Dev Performance标签;我想这会（希望）给我一些见解。我也知道有一些可以限制事件被调用次数的去抖函数;但是，我不知道或看到D3有这个。我认为降低拖动调用的原因与Chrome中的内部内容有关，也许它只是使用某种算法来根据鼠标的移动速度来调用拖动。这似乎是最可能的答案，但如果有人能够对我如何确定这种行为有所了解，我将非常感激。

最后一件事：我也知道，有时当你快速移动鼠标光标以至于它退出时。您正在拖动的对象，则不应调用拖动事件。然而，即使我不离开＆＃39;我拖动的对象，根据移动鼠标光标的速度，拖动的次数仍然较少。

P.S。当我使用D3时，这个问题很可能只与拖动有关，而不是D3的任何特定内容......

Answer 1

您所看到的问题与D3无关，它是一般的JavaScript行为，或者更好的是与浏览器相关的行为：您所看到的是{{{{{{{[{ 1}}。

如果您查看D3 API，您会看到＆＃34;拖动＆＃34;事件使用mousemove（或mousemove用于触控设备）：

拖动 - 在活动指针移动后（在鼠标移动或触摸移动时）。

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

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

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

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

＆＃13;

mousemove

＆＃13;

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")
}))

＆＃13;

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

＆＃13;

D3拖动事件的触发频率如何？

1 个答案: