How to delay a function or how to use settimout in draw

Question

I am trying to delay the beginning of a graphical element. There for I have called the function in a setTimeout in draw, but there is no delay, no matter how high I am setting the value. Is there another possibility or a specific reason why It won't work?

var expension = 100;

function draw() {
  ctx.clearRect(0,0, width, height);
  PerlinCircle('1', centerX , centerY, expension, 5, 0, 'rgba(0,0,0,'+alpha+')', true);//this is supposed to start right away
  setTimeout(PerlinCircle('1', centerX , centerY, expension, 5, 0, 'rgba(0,0,0,'+alpha+')', true),3000);//this is supposed to be delayed 
}

//following functions are only added for explanation

function resize() {
  width = canvas.width = window.innerWidth * 2;
  height = canvas.height = window.innerHeight * 2;
  centerX = width / 2;
  centerY = height / 2;
  canvas.style.width = centerX + 'px';
  canvas.style.height = centerY + 'px';
}

function animate() {
  requestAnimationFrame(animate);
  now = Date.now();
  elapsed = now - then;
  if (elapsed > fpsInterval) {
    then = now - (elapsed % fpsInterval);
    draw()
    expension += expensionVelocity;
    alpha=1.5-(expension)/maxExpension;
    console.log(alpha);
   if (expension>=maxExpension+(2*maxExpension/3)){
expension=minExpension;

   }
}
}


function PerlinCircle(id, X, Y, minSize, maxSize, lineWidth, FG, fill) {
  ctx.translate(X, Y);
  ctx.strokeStyle = FG;
  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round';

  if(fill) ctx.fillStyle = FG;

  let rand = savedRandom[id]?
      savedRandom[id] : savedRandom[id] = Math.random();
  let diff = findNextCoords(0, minSize, maxSize, rand);
  let dx = diff.x, dy = diff.y;
  let i = 0;
  let px = dx, py = dy;

  ctx.beginPath();

  while (i != SEGMENTS) {
    i += 1;

    diff = findNextCoords(i, minSize, maxSize, rand);
    dx = diff.x;
    dy = diff.y;

    ctx.lineTo(px, py);

    if(!matrix[i]) {
      matrix.push(px, py);
    }

ctx.quadraticCurveTo(dx, dy, (px+dx)/2, (py+dy)/2);

    px = dx;
    py = dy;
  }

  ctx.closePath();
  ctx.stroke();

  if(fill) ctx.fill();

  ctx.translate(-X, -Y);
}

I would expect to cause the setTimeout function to delay the beginning for the set time. But does is not delay at all.

It should be `setTimeout(function(){PerlinCircle('1', centerX , centerY, expension, 5, 0, 'rgba(0,0,0,'+alpha+')', true)},3000)`. — Gerardo Furtado, Jan 25 '19 at 12:13
You can try this approach.. `new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 2000); }).then(function () { PerlinCircle('1', centerX, centerY, expension, 5, 0, 'rgba(0,0,0,' + alpha + ')', true) });` — ggorantala, Jan 25 '19 at 12:22

score 0 · Answer 1 · answered Jan 25 '19 at 12:14

0

You are using function call inside timout. try this code below.

setTimeout(() => PerlinCircle('1', centerX , centerY, expension, 5, 0, 'rgba(0,0,0,'+alpha+')', true),3000);

answered Jan 25 '19 at 12:14

Asim Khan

1,969
12
21

Thank you to both of you, this was very helpful. But it is not working in the way I was expecting it. It only delays the display. I wanted to delay the start of the resize. Therefor I used your comments to adjust my code. But I am getting the same mistake as bevor, where there is no delay at all. I was wondering if you could help me one more time. https://glitch.com/edit/#!/feeling-color?path=script.js:63:42 This is the link to my project, since I am not able to incorporate that many lines I found this to be the only solution. The setTimeout function is used in line 63. Thanks – animofa Jan 25 '19 at 15:55

How to delay a function or how to use settimout in draw

1 Answers1