如何停止array.filter()函数

Question

使用自定义搜索过滤器

HTML

 <input type="text" pInputText class="ui-widget ui-text" [(ngModel)]
 ="gloablFilterValue" (ngModelChange)="splitCustomFilter()" placeholder="Find" />

我ngModelChange()在搜索框上使用事件

---

globalSearch(realData, searchText, columns) {
        searchText = searchText.toLowerCase();
        return realData.filter(function (o) {
            return columns.some(function (k) {
                return o[k].toString().toLowerCase().indexOf(searchText) !== -1;
            });
        });
    }

    splitCustomFilter() {
    let columns =  
   ['PartNoCompleteWheel', 'DescriptionCompleteWheel', 'PartNoTyre', 'DescriptionTyre', 'PartNoRim', 'DescriptionRim','DeletedDateFromKDPStr', 'DateFromKDPStr', 'Status'];
   this.tyreAndRimList = this.globalSearch(this.tyreAndRimList, this.gloablFilterValue, columns); 
    }

的this.tyreAndRimList值的,其是在所述的列列表column变量.

问题

过滤器工作正常!但主要问题是过滤器性能非常差,而记录数量很大(每列超过100行)

什么时候

如果输入单个字符(如a),过滤器工作正常.但是当我不断地输入字符时,浏览器就会挂起.原因是过滤器已经在过滤器盒上每次打字都被解雇(因为我正在使用ngModelChange()// onchange()事件)

我想要的是

如果用户在搜索框上连续输入,我想停止过滤.一旦用户停止输入,那么我只需要开始过滤.

我做了什么

我试图通过使用来处理这个问题setTimeout().但它只是等待过滤器调用一秒钟.如果用户连续输入2或3个字符,则可以正常工作.但是如果用户键入超过7或8或更高的字符,它将继续挂起浏览器.因为许多过滤器回调都在同一时间进行处理.

 setTimeout(() => //code of filtering ,1000);

题

如何在用户连续输入值时停止过滤,并在用户停止输入后开始过滤？

我在angular-2和打字稿工作.但这个问题是不是与只为与angularjs或angular 或JavaScript或typescript因为我想一个想法不是一个解决方案.所以我会为这个问题添加所有标签.不要删除它.谢谢

Answer 1

我已经使用Subjectto完成了它debounceTime。

private subject = new Subject<string>()
ngOnInit() {
        this.subject.debounceTime(300).subscribe(inputText => {
        this.gloablFilterValue = inputText;
        this.splitCustomFilter();   // filter method  
        });    
    }

this.gloablFilterValue现在，当我使用更改事件更改对象中的值时。它只是等待事件完成结束。