Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thread operation in javascript

    I want to sleep my code for some seconds
    how i can do that in javascript;
    (like wait(1000); in java)

    I have one for loop
    for(var i=0;i<400;i++)
    {
    //i want here sleep() like function so that after one line drawn i want to wait for milliseconds
    //then second line ,then third and so on (how to do this?)
    drawLine(context,startx,starty,copyendx,copyendy);
    }

    i have used code:"setTimeout(function(){drawLine(context,startx,starty,copyendx,copyendy);},100);"
    but its not working.
    Last edited by tejasagawane; 09-14-2011 at 12:44 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Code:
    // here is the first part of the code
    ...
    window.setTimeout(secondPart, 1000);
    
    function secondPart() {
       // the second part will be executed after 1000 milliseconds
       ...
    }

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    //i have used below code but its not working.
    setTimeout(function(){drawLine(context,startx,starty,copyendx,copyendy);},100);

    //Its taking whole time till 399 point so my code is going in waiting condion
    //but nothing nothing will be drawn on my canvas.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    If you want to have a timeout after each loop
    Code:
    for(i=0; i<limit; i++) {
       executeWhatever(i);
    }
    you'll have to "break up" the loop to have something like this
    Code:
    var i=0;
    
    nextExecution();
    
    function nextExecution() {
       executeWhatever(i);
       i++;
       if(i<limit) window.setTimeout(nextExecution, 1000);
    }

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't got .Can you explain me with my code?
    My code like this
    Code:
     for(var i=0;i<splitresponseData.length;i++)
                          {
                              //some delay (while calling  drawLine() i want some delay for each "i"
                             // i want some delay before or after calling to drawLine() method. 
                                drawLine(context,startx,starty,copyendx,copyendy);
                           }

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Code:
     for(var i=0;i<splitresponseData.length;i++)
                          {
                              //some delay (while calling  drawLine() i want some delay for each "i"
                             // i want some delay before or after calling to drawLine() method. 
    
    setTimeout(function(){
                                drawLine(context,startx,starty,copyendx,copyendy);
    }, 100* i );
    
                           }
    Last edited by rnd me; 09-14-2011 at 07:13 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    I think it should be 100*i instead of 100*1 ?

    But it doesn't make sense to call drawLine() with the same parameters over and over again. I think (there is no evidence whatsoever from the OP) that also those parameters change with each loop ...

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by devnull69 View Post
    I think it should be 100*i instead of 100*1 ?

    But it doesn't make sense to call drawLine() with the same parameters over and over again. I think (there is no evidence whatsoever from the OP) that also those parameters change with each loop ...
    doh! yeah, that's an "I". fixed it via edit.

    i assume that the comment lines above the function call alter the params passed to the draw function...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Quote Originally Posted by rnd me View Post
    i assume that the comment lines above the function call alter the params passed to the draw function...
    Which would not help anything ... because you create a closure the values will always be the same (they keep their values from the last loop).

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its all not working

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by devnull69 View Post
    Which would not help anything ... because you create a closure the values will always be the same (they keep their values from the last loop).
    then simply use a scope gate wrapper:
    Code:
    
    (function(i){ //private i
    
    setTimeout(function(){
                                drawLine(context,startx,starty,copyendx,copyendy);
    }, 100* i ); 
    
    }(i)); //public i
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to draw one line then wait for some milliseconds then draw next line again wait for next line and so on.
    How i can do that in my code?
    I have used setInterval() but its not working ,
    I also tried sleep for some milliseconds but it also not working.
    Please tell me whats wrong with it.
    This is my code:

    <!DOCTYPE html>
    <html>
    <head>

    <script type="text/javascript">

    var ms = 0;
    var y=5;
    var x=5;
    var copyendx=0;
    var copyendy=0;
    var context;
    var temp,total=0;
    //var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,1,3,3,4-8,5,6,6,7,7);
    var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,4,7,9,2,2,8);
    //alert(data);

    function init()
    {
    var graphCanvas = document.getElementById('graphSpace');
    context =graphCanvas.getContext('2d');
    drawgraph();
    }




    function drawgraph()
    {


    drawLine(context,5,50,5,250);
    drawLine(context,5,150,7,150);
    // setTimeout(drawgraph(),600);

    for(var i=0;i<data.length;i++)
    {

    var startx=5+x;
    var starty=150-(data[i]*y);
    var endx=(5+x)+1;
    var endy=150-(data[i]*y);
    if(i==0)
    {
    copyendx=endx;
    copyendy=endy;
    startx=5+x;
    starty=150;


    }
    //draw line and wait for some milliseconds
    drawLine(context,startx,starty,copyendx,copyendy);
    x=x+5;
    // pausecomp(100);
    copyendx=endx;
    copyendy=endy;
    }
    }


    //Draw line function
    function drawLine(contextO, startx, starty, endx, endy) {
    // var now = millis();
    contextO.beginPath();
    contextO.moveTo(startx, starty);
    contextO.lineTo(endx, endy);
    contextO.closePath();
    contextO.stroke();
    // ms=now;
    }

    //Sleep function
    function pausecomp(millis)
    {
    var date = new Date();
    var curDate = null;

    do
    { curDate = new Date();
    } while(curDate-date < millis);
    }

    function millis()
    {
    var d = new Date();
    return d.getTime();
    }

    </script>
    </head>
    <body onload="init()">

    <canvas id="graphSpace" width="800" height="400" style="background-color: #ffff00;"></canvas>

    </body>
    </html>




  • #13
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Will this do? (Remove the onload from your body tag...)
    Code:
    onload = function(){
      var ms = 100,
          y = 5, 
          x = 5, 
          copyendx = 0, 
          copyendy = 0, 
          context, 
          temp, 
          total = 0, 
          data = [-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,4,7,9,2,2,8];
    
      var drawgraph = function(){
        drawLine(context,5,50,5,250);
        drawLine(context,5,150,7,150);
      };
      
      var drawLine = function (context, startx, starty, endx, endy) {
        context.beginPath();
        context.moveTo(startx, starty);
        context.lineTo(endx, endy);
        context.closePath();
        context.stroke();
      };
      
      var loopIt = function(first){
        var startx=5+x;
        var starty=150-(data[0]*y);
        var endx=(5+x)+1;
        var endy=150-(data[0]*y);
        if(first){
          copyendx=endx;
          copyendy=endy;
          startx=5+x;
          starty=150;
        };
        drawLine(context,startx,starty,copyendx,copyendy);
        x=x+5;
        copyendx=endx;
        copyendy=endy;
        data.shift();
        data.length && setTimeout(loopIt,ms)
      };
      
      var init = function(){
        context =document.getElementById('graphSpace').getContext('2d');
        drawgraph();
        loopIt(true);
      };
    
      init();
    
    };
    Last edited by ironboy; 09-26-2011 at 08:05 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •