setTimeout() function doesn't seem to work

nexusbug

Hello all,

I recently started learning p5js about a month ago, by following Daniel Shiffman's video tutorials on youtube. These videos are great and he makes the learning process much more painless. I can not appreciate enough. Thank you and thank you again.

Today I was studying closures and coding along 9.6: JavaScript Closure - p5.js Tutorial. I always try to go and code something a bit extra than the tutorials do.

Program creates two paragraph elements and names them as timer1 and timer2 at setup, then changes them to counters at different rates. Without setTimeout(), timer1 counts with seconds and timer2 goes with half seconds. So timer2 starts half a second earlier than timer1. Here is the code:

    var timer1;
    var timer2;

    function setup() {
      noCanvas();
      timer1 = createP('timer1');
      timer2 = createP('timer2');

      makeTimer(timer1, 1000);
      setTimeout(makeTimer(timer2, 500), 1000);
      //could not figure out why setTimeout is not working
    }

    function makeTimer(elt, time) {
      var counter = 0;
      setInterval(timeThat, time);

      function timeThat() {
        elt.html(counter);
        counter++;
      }
    }

I tried to synchronize just the start time of both timers. Interestingly, the program is working but setTimeout for timer2 doesn't seem to work, it still starts half a second earlier than timer1. Could not figure out why it is not working.

GoToLoop

This statement doesn't make any sense: setTimeout(makeTimer(timer2, 500), 1000);

B/c invoking makeTimer() doesn't return anything. Therefore undefined is passed to setTimeout().

GoToLoop

I tried to synchronize just the start time of both timers.

setTimeout(() => makeTimer(timer2, 500), 500);

GoToLoop

Shorter version for makeTimer(): :ar!

function makeTimer(p5Elem, interval) {
  let counter = 0;
  setInterval(() => p5Elem.html(counter++), interval);
}

GoToLoop

There's another alternative syntax for setTimeout(() => makeTimer(timer2, 500), 500);: L-)
setTimeout(makeTimer, 500, timer2, 500);

Check all available overloaded signatures for setTimeout() at the link below: :-B

https://Developer.Mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

BtW, I've refactored your sketch and posted it online at the link below. Check it out: :bz
https://OpenProcessing.org/sketch/458021

index.html:

<script defer src=http://CDN.JSDelivr.net/npm/p5></script>
<script defer src=http://CDN.JSDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * Delayed setInterval() (v1.0.2)
 * NexusBug & GoToLoop (2017-Oct-08)
 *
 * https://Forum.Processing.org/two/discussion/24438/
 * settimeout-function-doesn-t-seem-to-work#Item_4
 *
 * https://OpenProcessing.org/sketch/458021
 */

"use strict";

function setup() {
  noCanvas();
  background(0xff);
  makeIntervalCounterTimer(createP('Timer A'), 1000, 'blue');
  setTimeout(makeIntervalCounterTimer, 500, createP('Timer B'), 500, 'red');
}

function makeIntervalCounterTimer(p5Elem, interval, color) {
  const label = (p5Elem.html() + ': ').fontcolor(color).big();
  let counter = 0;
  setInterval(() => p5Elem.html(label + counter++), interval);
}