Hostlistener wait

Question

Есть ли все равно, чтобы прослушивать пользовательские события в угловом 2 через интервалы? как раз в 3 секунды?

export class scrollDirectiveComponent{ 
    pageNo:any=1; 
    @Input() pageNumber:any; 
    @Output() emitPageNumber:EventEmitter<any> =new EventEmitter(); 
    @HostListener('scroll', ['$event']) 
     onScroll(event) { 
      console.log('scrolled', event.target.scrollTop); 
      let tracker = event.target; 
      let limit = tracker.scrollHeight - tracker.clientHeight - 5; 
      console.log(event.target.scrollTop, limit); 
      if (event.target.scrollTop > limit) { 
      this.pageNumber++; 
      this.emitPageNumber.emit(this.pageNumber); 
     } 
    } 
} 

Он продолжает прослушивать событие прокрутки, и номер страницы автоматически увеличивается. Если вы не можете ждать, тогда все равно, когда полоса прокрутки может быть изменена на новую позицию?

Answer 1

Как только я понял, вы можете сделать это следующим образом: в каждом событии прокрутки вы испускаете наблюдаемое и наблюдаемое значение throttleTime (3000), это означает, что пройдет только одно событие.

export class scrollDirectiveComponent { 
    pageNumber: any = 1; 
    private scrollEvents = new Subject(); 
    constructor() { 
    scrollEvents 
     .throttleTime(3000) 
     .subscribe(() => { 
     this.emitPageNumber.emit(++this.pageNumber); 
     }); 
    } 

    @Input() pageNumber: any; 
    @Output() emitPageNumber: EventEmitter<any> = new EventEmitter(); 
    @HostListener('scroll', ['$event']) 
    onScroll(event) { 
    console.log('scrolled', event.target.scrollTop); 
    let tracker = event.target; 
    let limit = tracker.scrollHeight - tracker.clientHeight - 5; 
    console.log(event.target.scrollTop, limit); 
    if (event.target.scrollTop > limit) { 
     this.scrollEvents.next(true); 
    } 
    } 
} 

Другой вариант посмотреть будет что-то вроде этого, но я не уверен, что вы должны попробовать, так как я никогда не делал директива

constructor(private _el: ElementRef){ 
    Observable.fromEvent(_el, 'resize') 
    .throttleTime(3000) 
    .subscribe(() => { 
     this.emitPageNumber.emit(++this.pageNumber); 
    }); 
}