I recently had to create a user-interface (UI) without the backend endpoints in place. The focus was on making the UI as responsive as possible so that the user can tell when an action is underway.

This mostly means that when an AJAX call is made, the UI should indicate so, and update correspondingly when the call completes.

To help with the development of the UI, I created a function to simulate AJAX calls. The function is able to:

• accept a delay (in milliseconds) to simulate the delay from making an actual AJAX call
• accept a probability of failing to simulate when an AJAX call fails
• return a supplied payload

The TypeScript code is below (see the gist for the complete code sample with the docstring):

export async function delay(
  timeout: number,
  probability?: number,
  result?: T
): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!probability || probability  1) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      if (hit 



To use this function:


async function handleButtonClick() {
  // Update the UI to show a loading indicator.

  try {
    // highlight-start
    // Make the call take 3 seconds, with a 10% chance of failure,
    // and return an array of users.
    const result = await delay(3000, 0.9, [
      {
        email: '[email protected]',
        username: 'User 1',
      },
    ]);
    // highlight-end

    // Update the UI when the call completes succesfully.
  } catch (err: any) {
    // Update the UI when the call fails.
  }
}




The JavaScript version of the same function below:


export async function delay(timeout, probability, result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (
        !probability ||
        typeof probability !== 'number' ||
        probability  1
      ) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      console.log(hit, probability);
      if (hit 



This post was first published at cheehow.dev