SetTimeout and SetInterval not working

[Jleger91]

The SetTimeout() timer and SetInterval() alike that has lightning flash every now and then is not working. Here is where the animate() function happens and where the timeout is called and it doesn't work.

Here is where the lightning effect is coded and it works successfully if there is no timeout.

EDIT:
If I use SetTimeout or SetInterval, and I put a console.log('Hello world!')
Then I notice in the console that the message in fact appears after set number of seconds, and then a number on the left of 'Hello world!' keeps increasing rapidly with no end.

Except if I use a doOnce variable, then it only fires once.
However, the lightning effect still doesn't happen.
Interestingly, it enters and exits the function but just doesn't do the stuff.
Now it seems that it does in fact enter all parts of the lightning function but I can't see the alpha updating visually.
So all of the variables are updating but I just can't see the changes visually.

I got it working. I simply moved the ctx.fillStyle and ctx.fillRect in front of the setInterval function.

 

[VBService]

setTimeout(() => {
    const result_light = lightning(ctx, alpha, lightning_min, lightning_max);
    alpha = result_light.alpha;
    lightning_min = result_light.lightning_min;
    lightning_max = result_light.lightning_max;
}, 2000); // flash every two seconds

This fragment is located inside the animate() function, which is continuously called by requestAnimationFrame(animate). This means that setTimeout is being registered on every animation frame, potentially dozens or hundreds of timeouts being scheduled to run every 2 seconds. This can lead to chaotic effects or overload the lightning logic by multiplying its invocations.

BTW,
requestAnimationFrame is typically called up to 60 times per second, i.e., roughly every 16.67 milliseconds. This frequency corresponds to the standard refresh rate of most monitors (60 Hz).

An example of code that avoids this problem could look like this:

let lastLightningTime = 0;

function animate() {
    // your animation code...

    const now = performance.now();
    if (now - lastLightningTime >= 2000) {
        // trigger lightning effect
    
        lastLightningTime = now;
    }

    requestAnimationFrame(animate);
}

let lastLightningTime = 0; // store the starting time (in milliseconds)

function animate() {
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  ctx.drawImage(backgroundLayer1, 0, bg_y);

  const result_bog = bog_ship(bg_y, hit_top, hit_bottom);
  bg_y = result_bog.bg_y;
  hit_top = result_bog.hit_top;
  hit_bottom = result_bog.hit_bottom;

  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 640, 40);
  ctx.fillRect(0, 440, 640, 40);

  // Check if 2 seconds have passed
  const now = performance.now();
  if (now - lastLightningTime >= 2000) {
    const result_light = lightning(ctx, alpha, lightning_min, lightning_max);
    alpha = result_light.alpha;
    lightning_min = result_light.lightning_min;
    lightning_max = result_light.lightning_max;

    lastLightningTime = now; // reset the timer
  }

  requestAnimationFrame(animate);
}


document.addEventListener('DOMContentLoaded', function () {
  // Your initialization code here
  lastLightningTime = performance.now();
  animate();
});

• performance.now() returns a precise timestamp in milliseconds (more accurate than Date.now()).
• We check if at least 2000 ms (2 seconds) have passed since the last lightning strike.
• If so, we trigger the lightning() function and update lastLightningTime.