Angular2 由于主线程繁忙，'mouse wheel'输入事件的处理延迟了 x 毫秒

Question

我使用Angular2 (r.2.0.0)与typescript (v.1.8.10)。而工作滚动Chrome不做任何事情，并给出警告(处理"鼠标滚轮"输入事件延迟236毫秒，由于主线线程正忙。考虑将事件处理程序标记为"被动"，以使页面响应更快。

我正在使用websocket消息和收到的消息不能触发滚动。当滚动作业完成后，所有接收到的消息开始处理。我在这里发现了类似的问题，但没有解决我的问题。

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>

代码:

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

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

Answer 1

你可以将所有的websocket交互委托给一个webworker，然后使用rxjs订阅webworker事件。在数据被接收和处理后，web worker可能会发出事件信号。

服务可以包装这个功能，在请求时返回一个Observable方法。

onMouseWhell也可以像这样包装在Observable中: