由于主线程正忙，Angular2 对“鼠标滚轮”输入事件的处理延迟了 x 毫秒答案

【问题标题】：Angular2 Handling of 'mouse wheel' input event was delayed for x ms due to main thread being busy由于主线程正忙，Angular2 对“鼠标滚轮”输入事件的处理延迟了 x 毫秒
【发布时间】：2016-10-12 08:07:42
【问题描述】：

我将 Angular2 (r.2.0.0) 与 typescript (v.1.8.10) 一起使用。在工作滚动时，Chrome 什么也不做并发出警告（由于主线程忙，“鼠标滚轮”输入事件的处理延迟了 236 毫秒。考虑将事件处理程序标记为“被动”以使页面更具响应性。）

我正在使用 websocket 消息，滚动时无法触发接收到的消息。滚动作业完成后，所有收到的消息都开始处理。我发现了类似的问题here，但它并没有解决我的问题。

html代码：

<canvas id="{{ReferenceLineCanvasName}}" (mousewheel)="OnMouseWheel($event)"  (dblclick)="OnMouseDoubleCliked()" (mouseout)="OnMouseUp($event)" (mousedown)="OnMouseDown($event)" (mouseup)="OnMouseUp($event)" (mousemove)="OnMouseMove($event)" class="reference_canvas_class"></canvas>

ts 代码：

public OnMouseWheel(event: any): any {...send message to server with websocket...}



public SocketMessageReceived(stream: any): any {.. not working while scrolling ...}

【问题讨论】：

标签： c# angular typescript scroll websocket

【解决方案1】：

您可以将所有 websocket 交互委托给 webworker，然后使用 rxjs 订阅 webworker 事件。 Web Worker 可以在接收和处理数据后发出事件信号。

服务可以包装此功能，根据请求返回 Observable 方法。

onMouseWell 也可以像这样包裹在 Observable 中：angular2 rxjs event handling

【讨论】：