问题描述:

I'm using a Jquery plugin in my angular2 project.

It has a serious performance problem if the plugin has an event like $(window).mousemove() or setInterval(function(){}, 10). Because zone.js has hooks to html events, the page always checks data changes. My cpu is running very high.

网友答案:

You can use NgZone to make code run inside or outside of Angulars zone.

Outside for performance reasons, inside to ensure Angular gets notified that change detection has to be run when properties of a component, model, or service are modiefied:

constructor(private zone:NgZone) {
  zone.runOutsideAngular(() => {
    $(window).mousemove()...;
    setInterval(() => {}, 10);
  })
}

onMouseMove() {
  this.zone.run(() => {
    this.someProp = 'someValue';
    this.router.navigate(....)
  });
}
网友答案:

you can use

@HostListener('mousemove', ['$event'])
  onMousemove(event: MouseEvent) { this.mousemove.emit(event); } 

instead $(window).mousemove()

will increase your performance

相关阅读:
Top