calling to the server with actionfunction and settimeout

Question

I have a search input on VF page which every character that printed on the keyboard will show the closest result, using actionFunction.

for example :

If I printed "uni" all accounts that they names include the name "uni" will appear for selecting.

every letter I tap in my keyboard is calling the controller and make a SOQL query.

I want to implement a change which calling the server base on a setTimout method - which won't call the method if the previous setTimeout function did not finish, so the server call will be reduced.

so far I have this :

<apex:input value="{!acc}" onkeyup="searchForAccount();" />

<apex:actionFunction name="searchAccount"  action="{!searchAccounts}"/>

 function searchForAccount() {

     function searchhh(){
        searchAccount();
     }


    setTimeout(searchhh, 500);
}

I want the server will be called again just after the first 500ms passed.

Anyone can help please?

Answer 1

You'll need to remember the previous "timer id" and cancel it:

var timerId;
function searchForAccount() {

     function searchhh(){
        timerId = null;
        searchAccount();
     }

    if(timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(searchhh, 500);
}