sleep

Promises are a super useful way to manage execution of asynchronous code in JavaScript. You can find helpful libraries in npm that cover almost any need for generic Promise utilities, but

  1. it’s good to internalize how you can write your own Promises
  2. they’re often super short and trivial to write
  3. you can easily avoid extra dependencies

For example, if we wanted to make a promisified version of setTimeout it’s as simple as this:

const sleep = (delay, resolveValue) => new Promise((resolve) => {
  setTimeout(() => resolve(resolveValue), delay);
});

or in TypeScript:

const sleep = <T extends any>(
  delay: number,
  resolveValue?: T
): Promise<T> =>
  new Promise((resolve) => {
    setTimeout(() => resolve(resolveValue), delay);
  });

With that you can very simply add a timeout delay into any async function:

await sleep(1000); // sleep for 1 second

I chose to allow for passing through an optional resolveValue. This can be useful if you’re chaining Promises and want to pass a previous response to the next .then(), but it is relatively useless if you’re using async/await.

Here’s an example of using it with Promise.all() to make the code wait for a minimum duration before executing code after an API call:

const [resp] = await Promise.all([
   fetch('/api/users/me').then(resp => resp.json()),
   sleep(3000)
]);

A neat thing about this setup, is that if the fetch errors, the rejection will be raised before the sleep completes. Otherwise the API call will execute as fast as it can, but we’ll always have to wait a minimum of 3 seconds before proceeding.

While a user interface should generally be as snappy fast as possible for the best user experience, sometimes—if it’s too fast—it will throw off the user. This makes sense when the user is doing a rare and monumental action, like clicking a button to convert from a consumer to business account or start a trial. Using the above setup with some thoughtful loading messaging (“finalizing your account”, “starting the reactor”, etc.) and then a nice payoff (confetti, celebrate fireworks) can create a tighter user experience than immediately updating things as soon as an API call returns!

Last week I received my 2nd COVID vaccine shot. Since the mayor had announced that New York City is now allowing any eligible resident to get vaccinated at city-run sites without an appointment, I took a look to see if I could find a place relatively close to me. I found this nyc.gov page and was able to filter down by borough and then match by vaccine type and the time & day each facility is operating.

The American Museum of Natural History was on the list. It was not too far from me and matched the shot I received my first time (Moderna). Furthermore, Claire mentioned seeing breathless excitement on twitter over the idea of getting a shot at AMNH and insisted I go.

nearing the subway entrance to the museum

Upon arriving, the signs outside directed me down to the subway level entrance where I briefly waited in line then checked in. Following blue tape arrows on the floor down a subterranean corridor, I neared an entrance to a large room. A friendly woman was waiting there to share additional logistical information about the shot and also to let me know that it was in the room with the life-sized blue whale model.

before getting my shot

Right before getting my shot, just krilling some time waiting in line. Thanks mom for nerdy mask!

before getting my shot

My view looking up as I got the shot. I really don’t like shots and passed out once as a kid after getting one. There’s something where my mind starts racing with irrational thoughts. Nowadays I avoid looking at it and usually pinch myself on the opposite side when it happens. FWIW, it really didn’t hurt and there was a whale of a distraction above me.

the tail end

Just after getting it—this was the tail end of my experience.

People’s post-shot experiences vary, I felt sick for a day, but rested and took Tylenol then bounced back fine the following day. It was nothing compared to the time I actually got the flu—but that’s another story about a time I almost fell prey to online misinformation..

I stopped by to see some friends after and learned their eldest daughter used to sing ”some whale over the rainbow” every time she went to the Natural History Museum. Turns out she was only getting started with her playful musings.

An overview of how Reselect fits into a Redux + React application and how it can become indispensable for performance. read full post…

19 April 2021

Iron Blogger

I have been partaking in an Iron Blogger since the start of the year. Here are some quick thoughts on it and partaking in a community. read full post…
A quick look at whether or not NYC cab drivers have a financial incentive to speed toward red lights, and some other thoughts on data! read full post…

Peter Coles

Peter Coles

is a software engineer who lives in NYC who is working on Superset and also GoFullPagemore »

github · soundcloud · @lethys · rss