如何停止array.filter（）函数 [英] how to stop array.filter() function

问题描述

使用自定义搜索过滤器

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 列变量中提到的列的值列表。

The this.tyreAndRimList list of values for the columns which is mentioned in a column variable.

问题

过滤器工作正常！但主要问题是过滤性能非常差，而记录数量很大（每列超过100行）

The filter is working good! But the main problem is filter performance is very poor while the record count is huge(more than 100 rows per every column)

何时

如果输入单个字符（例如 a ），过滤器工作正常。但是当我不断地输入字符时，浏览器就会挂起。原因是过滤器已经过滤了过滤器盒上的每个类型（因为我使用 ngModelChange（）// onchange（）事件）

The filter is working good if am entering a single character (like a). But when I was typing the character continuously the browser is hanging. the reason is the filter has been firing every typing on the filter box(because of am using ngModelChange()// onchange() event)

我想要什么

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

I want to stop filtering if the user typing continuously on the search box. Once the user has stop the typing then only I need to start filtering.

我做了什么

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

I have tried to handle this by using setTimeout(). But it just wait the filter call for a second. It is working if the user entered just 2 or 3 character's continuously. But if the user typing more than 7 or 8 or above character's, it continues to hang the browser. because of many filter callbacks are processing on the same time.

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

问题

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

How to stop filtering while user continuously entering value and start the filtering once the user has been stop the typing?

我正在使用angular-2和typescript。但是这个问题与 angularjs 或 angular 或 JavaScript 或 typescript 因为我想要一个想法而不是解决方案。所以我会为这个问题添加所有标签。不要删除它。谢谢

I am working in angular-2 and typescript. But this question is not related with only for angularjs or angular or JavaScript or typescript because of I want an idea not a solution. So I'll add those all tags for this question. Don't remove it. Thanks

推荐答案

我已经使用主题完成了 debounceTime 。

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

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

Now when I change the value in this.gloablFilterValue object by using change event. It just waiting for the end of event completion.

这篇关于如何停止array.filter（）函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！