Thread operation in javascript

tejasagawane · 09-14-2011, 10:55 AM

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.

devnull69 · 09-14-2011, 12:29 PM

Code:

// here is the first part of the code
...
window.setTimeout(secondPart, 1000);

function secondPart() {
   // the second part will be executed after 1000 milliseconds
   ...
}

tejasagawane · 09-14-2011, 12:52 PM

//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.

devnull69 · 09-14-2011, 03:42 PM

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);
}

tejasagawane · 09-14-2011, 03:59 PM

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);
                       }

rnd me · 09-14-2011, 04:23 PM

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 );

                       }

devnull69 · 09-14-2011, 04:25 PM

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 ...

rnd me · 09-14-2011, 07:14 PM

Quote:

Originally Posted by devnull69

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...

devnull69 · 09-14-2011, 08:41 PM

Quote:

Originally Posted by rnd me

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).

tejasagawane · 09-21-2011, 11:45 AM

Its all not working

rnd me · 09-21-2011, 04:07 PM

Quote:

Originally Posted by devnull69

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

tejasagawane · 09-26-2011, 12:27 PM

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:

Quote:

<!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>

ironboy · 09-26-2011, 07:52 PM

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();

};