A few years ago, I was messing around with the HTML Canvas element and 2d rendering context in React and I came up with a very simple component that would let me run a draw function whenever the props updated. Here’s the code on codepen.

For good measure, I included a simple demo implementation of Conway’s Game of Life (which is a zero-player game, so don’t expect to be able to do anything after clicking start):

Conway’s Game of Life

Since I originally wrote this, I’ve been preferring TypeScript over JavaScript and function components + hooks vs class components, so an update might be in order…

max timeout referee

A funny thing happens in JavaScript if you try to do a really long window.setTimeout(…) in your browser. If you go somewhere over 25 days (such as 1000ms * 60s * 60m * 24h * 25d = 2,160,000,000ms), then you’ll see the callback executes immediately!

window.setTimeout(() => console.log('done!'), 2160000000);
> done!

Taking a look at the MDN Web Docs we see:

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days), resulting in the timeout being executed immediately.

We can compute that max 32-bit signed integer value as such: (2^32) / 2 - 1, but hex is a nicer way to represent it in code:

const MAX_32BIT = 0x7fffffff;

While this scenario is uncommon, it’s easy to overlook, since JavaScript will easily go up to 2^53 - 1 (Number.MAX_SAFE_INT). If your code might pass through a delay larger than the max signed 32-bit int, then you can check for it and use recursion to go further:

const MAX_32_BIT = 0x7fffffff;

function safeTimeout(onTimeout, delay) {
  window.setTimeout(() => {
    if (delay > MAX_32_BIT) {
      return safeTimeout(onTimeout, delay - MAX_32_BIT);
    } else {
      onTimeout();
    }
  }, Math.min(MAX_32_BIT, delay));
}

If you want to handle clearTimeout or other approaches, I’ll leave that as an exercise for the reader.

thank u for reading, I like u this much!

The daylight saving time switch happened this morning. For me in NYC, at 2AM the clocks jumped back and it was 2AM again an hour later (“fall back, spring forward”). It’s a familiar ritual, but also one that’s clouded in confusion. read full post…
A chance encounter seeing a lecture from a chess GM in Washington Square Park. read full post…
A CSS trick that uses white-space nowrap to prevent a single word at the final line of a paragraph. read full post…

Peter Coles

Peter Coles

is a software engineer living in NYC who is building Superset 💪 and also created GoFullPage 📸
more »

github · soundcloud · @lethys · rss