1

I'm using Angular2 (r.2.0.0) with typescript (v.1.8.10). While working scroll Chrome do nothing and give the warning (Handling of 'mouse wheel' input event was delayed for 236 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.)

I'm using websocket message and received messages cannot trigger while scrolling. When scroll job finished then all received message begin to process. I found similar issue here but it didn't solve my problem.

html code : 

<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 code :

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



public SocketMessageReceived(stream: any): any {.. not working while scrolling ...}
Community
  • 1
  • 1
Emre AKYÜREK
  • 11
  • 1

1 Answers1

0

You may delegate all websocket interactions to a webworker then subscribe to webworker events using rxjs. The web worker may signal events after the data was received and processed.

A service may wrap this functionality returning an Observable upon request method.

onMouseWhell may be wrapped in a Observable too like this: angular2 rxjs event handling

user55993
  • 311
  • 3
  • 6