how to stop array.filter() function

Question

Am using custom search filter

HtML

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

I am using ngModelChange() event on search box

---

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); 
    }

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

Problem

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)

When

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)

What I want

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.

What I did

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);

Question

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

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

Answer 1

Debounce the function. See how underscore does it here: Function Debouncing with Underscore.js.

You would then generate a debounced version of your function like this:

var globalSearchDebounced = _.debounce(globalSearch, 100, false);

It will only call after the user has stopped typing for at least one second.