在mousemove处理程序中进行异步回调

Question

我有以下事件处理程序。由于它们发生的频率，它将非常“贪婪”。 onMouseMove，它将在所选区域周围绘制一个“套索”，然后在该区域周围进行受限制的地理空间搜索。

onMouseMove = ({ pageX, pageY }: MouseEvent) => {
  const lasso = this.getLasso(pageX, pageY);
  this.ctx.setLineDash([6]);
  this.ctx.strokeStyle = '#ffffff';
  this.ctx.strokeRect(lasso.left, lasso.top, lasso.width, lasso.height);

  // this is the problem area.
  this.props.onSelection(this.search(lasso));
}

但是，我发现callstack主要是关于运行这个回调。更新“套索”的操作仅为2毫秒，但onSelection回调需要约40毫秒。它们在性能方面都归为Event (mousemove)。我认为这使得套索的动画看起来非常不稳定。

是否有办法从鼠标事件处理程序中独立/异步地运行此回调？当mousemove事件完成时，它并没有那么重要。

Answer 1

使用setTimeout，延迟为0.它将被添加到JavaScript调度程序队列，并在当前调用堆完成后运行。

就地，这变为：

onMouseMove = ({ pageX, pageY }: MouseEvent) => {
  const lasso = this.getLasso(pageX, pageY);
  this.ctx.setLineDash([6]);
  this.ctx.strokeStyle = '#ffffff';
  this.ctx.strokeRect(lasso.left, lasso.top, lasso.width, lasso.height);

  // this is the problem area.
  setTimeout(function () { this.props.onSelection(this.search(lasso));});
}

由于0是默认值，因此您可以省略它，如链接文档中所示：

  

如果省略此参数，则使用值0，表示“立即”执行，或者更准确地执行，尽快执行。请注意，在任何一种情况下，实际延迟可能比预期的更长;请参阅下面的Reasons for delays longer than specified。