How to rerender panel only onetime for onkeydown/onkeypress/onkeyup Javascript events

Question

I have input text box with onkeydown Java script event in my visualforce page. This event will call the java script method and from there action function will call. When action function call, i have initialized the object with data. Display the object data in the panel.

Code snippet:

<apex:inputText value="{!strSearch}" onkeydown="return SetTimer(event);" html-placeholder="Search..." id="txtSearch"/>

function SetTimer(e){
   setTimeout("ReviewSearch()",1000);
}

<apex:actionFunction action="{!ReviewSearch}" name="ReviewSearch" reRender="Activities" status="splashStatus"/>

<apex:outputPanel id="Activities">
     // display activities from controller
</apex:outputPanel>

Now iam getting the performance issue, because how many letters iam typing in text box that many times panel refreshing.

Is there any way to rerender the panel only one time without change the event.

Can anyone help on this.

Thanks,

Answer 1

You need to clear the previous timer, or you'll get multiple calls, spaced one second after the original event:

var timer;
function SetTimer(e){
   if(timer) clearTimeout(timer);
   timer = setTimeout("ReviewSearch()",1000);
}