ajax - How to delay Primefaces AjaxStatus on JSF? -

how add delay (300ms example) on when primefaces' ajaxstatus show. right shows when there's ajax request pending. troublesome example on "onkeyup" events when each key stroke brings loading dialog split second.

here's ajaxstatus loading indicator component:

<p:ajaxstatus id="startajax" onstart="pf('start').show();" oncomplete="pf('start').hide();" > </p:ajaxstatus>  <p:dialog widgetvar="start" showheader="false" resizable="false">     <h:graphicimage value="#{resource['/images/loading.gif']}"></h:graphicimage> </p:dialog> 

you need wrap pf('start').start() function call delay. also, oncomplete handler should check if have pending status show , cancel them. avoid case ajax finished before status displayed.

code should (not tested)

<p:ajaxstatus id = "startajax" onstart = "starthandler();" oncomplete = "endhandler();"/>     <script>         var ajaxinprogress;         function starthandler() {             ajaxinprogress = settimeout(function () {                 pf('start').show();             }, 3000);         }         function endhandler() {             cleartimeout(ajaxinprogress);             pf('start').hide();             ajaxinprogress = null;         }     </script>