각도 2 Observable Interval이 UI를 잠급니다.

Question

Observable.Interval을 사용하여 UI를 http 새로 고침을 수행하면 간격이 너무 길면 UI의 버튼이 작동하지 않도록 잠급니다. 단추가 클릭을 등록하지 않는 경우 타이밍 문제 인 것 같습니다. 타이밍을 높이고 전화를받지 못하면 단추가 작동하지만 데이터가 업데이트가 지연됩니다.

는 GetData의

this.dataSub = Observable.interval(1000).subscribe(x => { 
    this.getData(); 
}) 

간격

getData(): void { 
    this.dataService.getData() 
     .subscribe(
       data => this.data = data, 
       error => console.log("Error HTTP Get Service" + this.data), 
      () => {}); 
} 

는 가장 좋은 방법은 있는가, 또는 뭔가 내가 UI를 새로 고침하지만 잠글하지 않는 일을해야한다는 실종있어 버튼

Answer 1

이론

일반적으로 가능한 경우 관찰 대상에 명시 적으로 가입하지 않아야합니다. 대신, 모든 소스/입력 관측 값을 async 파이프가있는 뷰에서 사용하는 하나 이상의 관측 값으로 구성 할 수있는 모든 연산자를 사용하십시오 (예, 올바른 것을 계산하는 것이 매우 까다 롭습니다).

JS는 단일 스레드 (근로자 제외)라는 것을 잊지 마십시오. 귀하의 UI와 대부분의 각도 코드는 하나의 스레드를 공유해야하므로 JS를 오래 실행하면 UI가 잠길 수 있습니다.

이 세 가지 주요 이점이 있습니다

1. 그것은 거의 불가능 메모리 누수가 발생할 수 있습니다. ngOnDestroy() 훅에서 항상 구독을 취소하는 것을 기억하지 않거나 더 이상 신경 쓰지 않는 경우 수동으로 구독 할 때마다 메모리 누수가 발생할 위험이 있습니다. async 파이프가 사용되는 구성 요소/요소가 파괴되면 올바르게 파이프가 수신 거부되는 반면, 걱정할 필요가 없습니다.
2. 덜 효과적입니다. switchMap(), switchLatest() 등의 연산자를 사용하면 대체 된 HTTP 호출 및 기타 비싼 작업을 취소하고 정리할 수 있으며 더 이상 필요하지 않은 경우 시작하기 전에 중지 할 수도 있습니다. 당신보다 더 많이하지 마십시오. 이는 일반적으로 변경 감지가 더 많이 실행될 필요가 없음을 의미하므로 성능이 향상됩니다.
3. 클리너 코드. 멤버 변수가 적고 기능적 코드가 더 많습니다. 예, Rx를 학습 할 때 이해하는 것이 조금 어려울 수 있지만 더 쉽게 이해할 수 있습니다. 당신은 당신의 코드에 적용 할 수있는 방법을 연습 마음에 모두와

   에서

? 당신이 (많은 사람들이 아니다)을 인식하지 않을 수 있습니다

한가지는 당신의 DataService.getData() 방법 인 경우 뭔가 같은 :

getData(): Observable<MyData[]> { 
    return this.http.get('http://some.url/data').map(res => res.json()); 
} 

다음은 Http 서비스에 의해 생성 된 관찰에 가입 할 때마다, 새로운 요청이 이루어진다. 이게 니가 원하는거야.하지만 이 원하지 않는 건이 새로운 요청이 이루어 지자 마자 이전 요청의 결과를 처리하는 것이다.

그래서 당신은 대신 컨트롤러에이 같은 것을 사용하여 가장 최근 요청의 최신 데이터를 관찰 한 구성 없었다 :

ngOnInit() { 
    // (I follow a convention where observable properties end in $) 
    this.data$ = Observable.interval(1000).flatMapLatest(() => { 
     return this.dataService.getData(); 
    }); 
} 

구독 정보, 관찰 만들어 단지를. 그런 다음보기에서 data$ 속성이있는 비동기 파이프를 사용하면 황금색입니다. 예를 들어

:

<ul *ngFor="let d of (data$ | async); trackBy: d?.id"> 
    <li>{{d.name}}</li> 
</ul>