Currently facing the following issue:
Within my JavaScript file, I have the below code snippet,
termChange(evt) {
this.rows = [];
this.searchTerm = evt.target.value;
this.getCases();
}
This section of code clears out the rows returned after a search, captures the search term from the event, and then triggers the getCases function.
The getCases function is an asynchronous operation that retrieves data from our server. The HTML includes onChange={termChange}. However, the problem arises as every keystroke prompts the function to fire 8 times during searching. This results in undesired duplicate search results. I am seeking a way for this event to trigger only after the user finishes typing. I've attempted using setTimeouts and debounce techniques but have been unsuccessful in resolving the issue. Any assistance with this matter would be greatly appreciated. Thank you!
The goal is for the search to automatically initiate once the user has finished typing, without requiring any additional actions or clicks.
debounce(func, wait, immediate) {
var timeout;
return function executedFunction() {
var context = this;
var args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
Here is the debounce function implementation. However, when attempting to use it like so:
handleTermChange = this.debounce(this.termChange(), 1000, false);
An error is thrown stating that the target is undefined. As a result, the event is not passed through, and I have been unable to find a solution to make it functional. This obstacle persists with using the debounce method effectively.