Only fire function when user is done typing

Question

There is this post that talks about how to fire a function once the user is done typing. How can this be implemented in an aura component? This is what I have so far, but it doesn't work.

<aura:component controller="SearchController" implements="forceCommunity:availableForAllPageTypes">
    <aura:attribute name="searchValue" type="String"/>
    <aura:attribute name="articles" type="List" default="[]"/>
    <aura:attribute name="timer" type="Object"/>

                <span onkeyup="{!c.onKeyUpHandler}" onkeydown="{!c.onKeyDownHandler}">
                    <lightning:input aura:id="searchValue" 
                                     type="search" 
                                     placeholder="Enter text..." 
                                     class="fl sidenav-search"/>
                </span>

</aura:component>

component.js

onKeyUpHandler:function(component, event, helper) {
    let timer = component.get("v.timer");
    timer = setTimeout(helper.handleSearch(component,event,helper), 1000) 

    component.set("v.timer", timer);
},
onKeyDownHandler:function(component) {
    let timer = component.get("v.timer");
    clearTimeout(timer);

    component.set("v.timer", timer);
}

Answer 1

In JavaScript, when you want to set a callback, you need to bind to a function. Assuming you also want to be in the Aura life cycle (which is almost always yes), the resulting Aura version of the code looks like this:

onKeyUpHandler:function(component, event, helper) {
    let timer = setTimeout(
      $A.getCallback(
        helper.handleSearch.bind(helper,component,event,helper)
    ), 1000) 
    component.set("v.timer", timer);
},
onKeyDownHandler:function(component) {
    let timer = component.get("v.timer");
    clearTimeout(timer);
    component.set("v.timer", null);
}

Notable changes:

• v.timer is set to null after clearing the timer.
• v.timer is not read before setting it via setTimeout.
• $A.getCallback ensures you're in an Aura life cycle event.
• .bind(helper, component, event, helper) returns a bound function reference with this set to helper (the same behavior as if you'd called it directly). Without this, the original code was calling the method immediately instead of waiting 1,000 ms.

Answer 2

This worked for me. I don't even need the onKeyDownHandler anymore.

onKeyUpHandler:function(component, event, helper) {
    var timer = component.get('v.timer');
    clearTimeout(timer);

    var timer = setTimeout(function(){
        var newlst = [];
        helper.handleSearch(component,event,helper);
        clearTimeout(timer);
        component.set('v.timer', null);
    }, 700);

    component.set('v.timer', timer);
},

and the helper is important. The utility.getDataParams is just a function from a static resource that I've generalized to enqueue server side apex for data retrieval.

handleSearch : function(component, event, helper) {
    let searchValue = component.find("searchValue").get("v.value");

    if(searchValue.length > 1) {
        this.searchForArticles(component, searchValue);
    } else {
        component.set("v.articles", []);                      
    }
},   
searchForArticles : function(component, searchValue) {
    let params = {searchValue:searchValue}
    //var d = new Date();
    //console.log(params);
    //console.log(d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds());

    $A.getCallback(function() {
        utility.getDataParams(component, "c.getArticles", params, $A.getCallback(function(error, value) {
            console.log(value);
            component.set("v.articles", value);                      
        })); 
    })();

},