>

테이블이 있는데 사용자가 행 중 하나 위로 마우스를 가져갈 때마다 http 요청을 트리거하려고합니다. 그러나 사용자가 행에서 200ms 이상을 보낸 경우에만 요청을 보내려고합니다. 나는 그 switchMap 알아  http 요청을 취소 할 수는 있지만 이미 진행중인 http 요청이 서버에 충돌하는 것을 막지 못합니까? 디 바운스에 대한 다른 논리를 구현해야합니까 (예 : Subject )  그리고 debounceTime ?

감사합니다.

  • 답변 # 1

    아시다시피 switchMap은 이전에 구독 한 옵저버 블을 종료시킵니다.

    위의 의견에서 Fan Cheung은 페치를 사용하고 있습니다. 가져 오기는 취소를 지원하지 않습니다.

    Angulars HttpClient는 http 요청 취소를 지원하므로 운이 좋았습니다.

    호버 이벤트를받는 방법에 따라 다르게 처리 할 수 ​​있습니다. 하지만 주제를 사용하여 버전을 보여줄 수 있습니다

    (미확인 코드)

    @Component({
        template: `
            <table>
                <tr
                    *ngFor="let item of items"
                    // on hover we pass the current item to the mouseOver handler
                    (mouseover)="mouseOver(item)"
                >
                    <td>{{item}}</td>
                </tr>
            </table>
            // if there is a hovered item we show it
            <div *ngIf="hovered$ | async; let hoverItem">
                {{hoverItem}}
            </div>
        `
    })
    export class TableComponent extends Component {
        items = ['one', 'two', 'three'];
        // a stream of hovered items
        hoverSubject = new Subject();
        // a stream of requested hover items
        // that have been debounced
        hoverItem$: Observable<string>;
        constructor() {
            this.hoverItem$ = this.hoverSubject.pipe(
                // only let items pass every 200ms
                debounceTime(200),
                // only pass items that are different from the previous ones
                distinctUntilChanged,
                // do the request
                switchMap(item => this.http.get(`https://something`)),
            );
        }
        // emit new hovered items into the hoverSubject
        mouseOver(item: string) {
            this.hoverSubject.emit(item);
        }
    }
    
    

  • 이전 javascript - for 루프를 사용하여 객체의 모든 키 값 쌍 변경
  • 다음 파이썬에서 함수와 구문이있는 어려움