Wednesday, June 24, 2009

How to set wait in javascript, JavaScript Delay, JavaScript wait, JavaScript pause



You can use setTimeout() method or false loop to acheive wait functionlity in JavaScript. There is no such wait() or sleep() methods are here in JavaScript.

1. First Example with setTimeout()
Write one Time1.html and paste below code

<html>
CHECK FOR WAIT IN JAVA SCRIPT
<script type="text/javascript" language="javascript1.2">

function waitCheck(){
alert("Binod Kumar Suman");
setTimeout(function(){secondMethod()},2000);
}

function secondMethod(){
alert("Target Corporation");
}

</script>
<br>

<input type="button" value="Check" onClick="waitCheck()"/>
</html>

Just do double click on Time1.html you will get one alert immedialty but only after 2 seconde you will next alert message.

2. Second Example with false loop
Write one Time2.html and paste below code

<html>
CHECK FOR WAIT IN JAVA SCRIPT
<script type="text/javascript" language="javascript1.2">
function waitCheck(){
alert("Binod Kumar Suman");
pauseJS(1500);
secondMethod();
}

function secondMethod(){
alert("Target Corporation");
}

function pauseJS(timeInMilliS) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < timeInMilliS);
}

</script>
<br>
<input type="button" value="Check" onClick="waitCheck()"/>
</html>

Just do double click on Time2.html you will get one alert immedialty but only after 2 seconde you will next alert message. :)
Posted by at

3 comments:

  1. purushottam rathoreJuly 1, 2009 at 8:49 PM

    Nice article

    ReplyDelete
  2. Anand sharmaJuly 2, 2009 at 9:58 AM

    nice one , keep it up..Anand sharma

    ReplyDelete
  3. UnknownNovember 9, 2009 at 9:52 PM

    I have searched/googled quite a few webpages on javascript sleep/wait... and there is NO answer if you want javascript to "RUN, DELAY, RUN"... what most people got was either, "RUN, RUN(useless stuff), RUN" or "RUN, RUN + delayed RUN"....

    So I ate some burgers and got thinking:::
    here is a solution that works... but you have to chop up your running codes...:::

    replace <.. with < to run..
    //.........................................
    //example1:

    <..html>
    <..body>
    <..div id="id1">DISPLAY<../div>

    <..script>
    //javascript sleep by "therealdealsince1982"; copyrighted 2009
    //setInterval
    var i = 0;

    function run() {
    //pieces of codes to run
    if (i==0){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" is ran<../p>"; }
    if (i==1){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" is ran<../p>"; }
    if (i==2){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" is ran<../p>"; }
    if (i >2){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" is ran<../p>"; }
    if (i==5){document.getElementById("id1").innerHTML= "<..p>all code segment finished running<../p>"; clearInterval(t); } //end interval, stops run
    i++; //segment of code finished running, next...
    }

    t=setInterval("run()",1000);

    <../script>
    <../body>
    <../html>

    //....................................
    //example2:

    <..html>
    <..body>
    <..div id="id1">DISPLAY<../div>

    <..script>
    //javascript sleep by "therealdealsince1982"; copyrighted 2009
    //setTimeout
    var i = 0;

    function run() {
    //pieces of codes to run, can use switch statement
    if (i==0){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" ran<../p>"; sleep(1000);}
    if (i==1){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" ran<../p>"; sleep(2000);}
    if (i==2){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" ran<../p>"; sleep(3000);}
    if (i==3){document.getElementById("id1").innerHTML= "<..p>code segment "+ i +" ran<../p>";} //stops automatically
    i++;
    }

    function sleep(dur) {t=setTimeout("run()",dur);} //starts flow control again after dur

    run(); //starts flow
    <../script>
    <../body>
    <../html>

    ReplyDelete

Please leave your feedback or your question related to this blog. :)

Subscribe to: Post Comments (Atom)