爲什麼反應搜索速度很慢2

Question

首先，我認爲這是我的代碼問題。 但我不知道那是爲什麼。

這是我想這樣做：

你可以在我的圖片看到：我輸入「NG2」，從github api

然後得到的數據我改變頁面大小一遍遍再次，等待UI更新。

但是UI是凍結了很長一段時間讓我難以置信。

somone會告訴我，我的代碼在哪裏錯了？

這裏是我的代碼：

import { Component, OnInit } from '@angular/core'; 
 

 
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; 
 

 
import { User } from '../../../model/user.model'; 
 

 
import { Observable } from 'rxjs/Rx'; 
 

 
import { UserService } from '../../../services/user.service' 
 

 

 

 

 
@Component({ 
 
    selector: 'paginated-list', 
 
    templateUrl: 'paginated-list.component.html', 
 

 
}) 
 

 
export class PaginatedListComponent implements OnInit { 
 

 
    //init data 
 
    pageNumList: number[] = [1]; 
 

 
    pageSizeList: number[] = [10, 30, 50, 100]; 
 

 
    gitForm: FormGroup; 
 

 
    errorMessage: string; 
 

 
    gitRepStream: Observable<any>; 
 

 
    totalCount: number; 
 

 
    gitRepList: any[]; 
 

 
    constructor(private fb: FormBuilder, private _userService: UserService) { 
 
    } 
 

 
    ngOnInit(): void { 
 
     this.buildForm(); 
 
    } 
 

 
    buildForm(): void { 
 

 
     this.gitForm = this.fb.group({ 
 
      'searchTerm': [''], 
 
      'pageNum': this.pageNumList[0], 
 
      'pageSize': this.pageSizeList[0] 
 
     }); 
 

 
     this.gitRepStream = this.gitForm.valueChanges 
 
      .debounceTime(1000) 
 
      .distinctUntilChanged() 
 
      .switchMap(this.mapSearchCondition.bind(this)) 
 
      .share(); 
 

 
     this.gitRepStream.subscribe((data: any) => { 
 
      if (Object.keys(data.items).length > 0) { 
 
       const tempList: any[] = data.items; 
 

 
       this.gitRepList = Object.assign(tempList, data.items); 
 

 
       this.totalCount = data.total_count; 
 
       this.errorMessage = data.error; 
 

 
       const ctrlPageNum = this.gitForm.get('pageNum') as FormControl; 
 
       const ctrlPageSize = this.gitForm.get('pageSize') as FormControl; 
 

 
       const tmpPageSize = ctrlPageSize.value as number; 
 
       const totalPage = Math.round((this.totalCount + tmpPageSize - 1)/tmpPageSize); 
 
       const tempPageNums: number[] = [1]; 
 
       Observable.range(2, totalPage) 
 
        .subscribe(
 
        d => tempPageNums.push(d)); 
 
       this.pageNumList = tempPageNums; 
 

 
       console.log(`pageNum is:${tmpPageSize} || pageIndex is ${ctrlPageNum.value}`); 
 
      } 
 
     }); 
 

 

 
    } 
 

 
    mapSearchCondition(formValue: any): any { 
 
     const params = { 
 
      q: formValue['searchTerm'], 
 
      page: formValue['pageNum'], 
 
      per_page: formValue['pageSize'] 
 
     }; 
 
     if (params.q) { 
 
      return this._userService.getGitHubRepositories(params) 
 
       .catch((errMsg: string) => { 
 
        return Observable.of({ items: [], total_count: 0, error: errMsg }); 
 
       }); 
 
     } 
 
     else { 
 
      return Observable.of({ items: [], total_count: 0 }); 
 
     } 
 
    } 
 
}

Answer 1

我發現了一個錯誤，沒有具體到rxjs或角。 這一行將輸出巨大的數字：

const totalPage = Math.round((this.totalCount + tmpPageSize - 1)/tmpPageSize);