JavaScript Concurrency: setTimeout and Functions

• setTimeout works in the same way when we wrap our code in functions, classes, or any other language construct.

• (Note that the next example says "async result:", not just "result:". That indicates that Execute Program will wait for the timer to finish, so we'll see the array contents after the array.push has already run.)

• >

  function doAsyncWork() {
    const array = [];
    setTimeout(() => array.push('it worked'), 1000);
    return array;
  }
  const array = doAsyncWork();
  array;

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  ['it worked']

• As our examples get more complex, we'll want to extract our asynchronous callbacks into their own functions. Here's an example of that: we asynchronously collect users' names in an array.

• >

  const users = [
    {name: 'Amir'},
    {name: 'Betty'},
  ];
  
  function addUserName(names, user) {
    names.push(user.name);
  }
  
  function doAsyncWork() {
    const names = [];
    for (const user of users) {
      setTimeout(() => addUserName(names, user), 1000);
    }
    return names;
  }
  
  const array = doAsyncWork();
  array;

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  ['Amir', 'Betty']

• Extracting callbacks like this makes changing code easier. If we're tracking down a bug where asynchronous code seems to execute in the wrong order, we'll start by looking at doAsyncWork. But if we're fixing a bug in the work itself, we'll start by looking at addUserName.

• (Of course, real-world equivalents of addUserName will be more than one line long. Imagine that function being 10 lines long instead of 1!)

• Here's a code problem:

  Set a timer to call the addMessage function after 100 ms.

  (This example uses .slice() to duplicate the messages array's value before any timers run. That lets us check the value of the array before and after the timer finishes.)

  9

  1

  2

  3

  4

  const messages = [];

  function addMessage() {

  messages.push('It worked!');

  }

  13

  5

  setTimeout(addMessage, 100);

  14

  6

  7

  const initialMessages = messages.slice();

  [initialMessages, messages];

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  Goal:

  [[], ['It worked!']]

  Yours:

  [[], ['It worked!']]

  Show Author's Answer