javascript - Show loading animation with delay -

in web application i'm using jsf , primefaces. on buttons have time consuming functions. during time want show loading animation until complete site built. i'm doing calling functions showloading() , hideloading() this:

<p:commandlink oncomplete="hideloading();" onstart="showloading()" process="@form" update="@form" actionlistener="#{dummycontroller.dummymethod}" content </p:commandlink> 

inside functions i'm showing/hidings div-objects specified id:

function showloading() {     $("#loader").show(); } 

this works fine. want show loading animation if pages needs more second build. that's why modified functions this:

function showloading() {     $(#loader").delay(1000).show(0); }  function hideloading() {     $("#loader").clearqueue();     $("#loader").hide(); } 

my problem @ point: loader works fine, in case doesn't appear. suggestion: showloading called @ different times (managed client). called right @ beginning, other actions executed before showlading it's less second build rest of page.

does has suggestions solve problem? maybe multithreading in javascript (i read web workers...)

thanks help.

from jquery delay page:

the .delay() method best delaying between queued jquery effects. because limited—it doesn't, example, offer way cancel delay—.delay() not replacement javascript's native settimeout function, may more appropriate use cases.

i think can use settimeout javascript function, this

var timer;  function showloading() {     timer = settimeout(function(){                           $(#loader").show(0);                        }, 1000); }  function hideloading() {     if(timer){         cleartimeout(timer);     }     $("#loader").hide(); }