CODEWITHSUNDEEP
javascriptsettimeout
Mel Blanc
Mel Blanc

Reputation: 29

Implementing delay in javascript

I am trying to delay execution of script in a loop. After reviewing multiple queries and answers I am overwhelmed with information and seem unable to sort it out. Wandering through answers relative to 'setInterval', and 'setTimeout' it seemed to me that 'setTimeout' was the appropriate method of implementing the desired delay.

What I want to do is have a loop draw a set of lines and return to the beginning of the loop were it will wait for a defined period (about 250 mSec - 1000 mSec), then wipe the screen, increment the value setting the position where one line is drawn and draw the next line in the new position.

Single stepping through the code using Firefox's debugger the process can be observed to occur. However when the code is executed outside the debugger a delay occurs and only the line for the last increment of the code is drawn. Any suggestions as to what I am doing wrong? Thanks in advance.

The code is listed below:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#ffffff";
scrndrw();

function scrndrw() {
    for (var angle = 1; angle < 361; angle++) {
        setTimeout(scrndrwdel(), 1000);

        function scrndrwdel() {
            ctx.fillRect(0, 0, 600, 600);
            ctx.beginPath();
            ctx.moveTo(300, 300);
            ctx.lineTo((((Math.cos(angle * (Math.PI / 180))) * 250) + 300), (((Math.sin(angle * (Math.PI / 180))) * 250) + 300));
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000000";
            ctx.stroke();
            ringdraw();

            function ringdraw() {
                for (var i = 1; i <= 5; i++) {
                    ctx.beginPath();
                    ctx.arc(300, 300, (50 * i), 0, 2 * Math.PI);
                    ctx.lineWidth = 3;
                    ctx.strokeStyle = "#000000";
                    ctx.stroke();
                }
            }
        }
    }
}
<canvas id="myCanvas" width="600" height="600">

Upvotes: 1

Views: 90

Answers (2)

Mel Blanc
Mel Blanc

Reputation: 29

After viewing the various recommended sites it became apparent the easy way was to use 'setInterval'. The code was rewritten as shown below. The code runs, draws the screen, and waits until it is triggered again by 'setInterval'. The code is triggered to re-run every 2 mSec.

If I understand correctly methods such as 'pause', 'wait' etc found in other languages will not work as it locks the browser until the timeout ends. 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var angle = 0;
ctx.fillStyle = "#ffffff";

draw_line();
setInterval(draw_line, 2);

function draw_line() {
    ctx.fillRect(0, 0, 600, 600);
    ctx.beginPath();
    ctx.moveTo(300, 300);
    ctx.lineTo((((Math.cos(angle * (Math.PI / 180))) * 250) + 300), (((Math.sin(angle * (Math.PI / 180))) * 250) + 300));
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#00ff00";
    ctx.stroke();

    // ctx.arc(150, 150, 10, 0, 2*Math.PI);
    // ctx.strokeStyle = "#ff0000";
    // ctx.stroke();

    if (angle < 360) {
        angle = angle + 0.25;
    } else {
        angle = 0;
    }

    for (var i = 1; i <= 5; i++) {
        ctx.beginPath();
        ctx.arc(300, 300, (50 * i), 0, 2 * Math.PI);
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#00ff00";
        ctx.stroke();
    }
}
<canvas id="myCanvas" width="600" height="600">

Upvotes: 1

KolaCaine
KolaCaine

Reputation: 2187

You can made this for example : 

function send () {
	console.log('OK');
  setTimeout(send, 10000);
}

setTimeout(send, 1000);

The first run of the setTimeout function is executing after that he running the console.log and again the setTimeout function, with a new delay inside :)

Upvotes: 0

Related Questions