Asynchronous Programming

Timer API

setTimeout(() => {
	console.log("2000 ms");
}, 2000);

setInterval(() => {
	console.log("3000 ms");
}, 3000);

const timeoutId = setTimeout(() => {
  console.log('2 seconds have passed since setTimeout was triggered.');
}, 2000);
const intervalId = setInterval(() => {
  console.log('This will be printed every 3 seconds.');
}, 3000);
clearTimeout(timeoutId);
clearInterval(intervalId);
// Nothing will be printed.

const start = new Date();

setTimeout(() => {
  console.log(new Date() - start);
}, 100);

// There's a slight difference between the actual and expected delay time.

setTimeout(() => {
  console.log('hello');
}, 0);

console.log('world');

// Output:
// world
// hello

Browser JavaScript Execution Process

Call Stack

function add(x, y) {
  return x + y;
}

function add2(x) {
  return add(x, 2); // Calls `add`
}

function add2AndPrint(x) {
  const result = add2(x); // Calls `add2`
  console.log(result); // Calls `console.log`
}

add2AndPrint(3); // Calls `add2AndPrint`

• Variables used inside the function

• The scope chain

• The object that this refers to

• When the script is loaded, the global execution context is added to the call stack.

• When a function is called, an execution context for that function is created and pushed onto the call stack.

• When a variable is assigned a value, the call stack stores that variable's value.

• When a function finishes executing, it returns the result, and the execution context at the top of the stack is popped off.

• When all the script execution is finished, the global execution context is popped off.

// A code that loops for a certain time
function sleep(milliseconds) {
  const start = Date.now();
  while ((Date.now() - start) < milliseconds);
}

sleep(5000);
// The while loop runs for 5 seconds, blocking the call stack, and the browser becomes unresponsive.

Task Queue

• Instead of processing the task directly in the JavaScript engine, the task is delegated to the browser via an API, and a callback is registered to be executed once the task completes.

• Once the task is finished, the result and callback are added to the task queue.

• When the call stack is empty, the browser takes the oldest task from the queue and executes its callback. This process is called the event loop.

• Tasks in the queue are processed in the order they were added.

• If there are tasks already in the task queue, new tasks will only execute after all prior tasks in the queue have been processed and the call stack is empty.

• If the call stack is not cleared, tasks in the queue cannot be processed.

• Between each task, the browser may repaint the screen. If the call stack isn't cleared, the screen won't be repainted.

setTimeout(() => {
  console.log('hello');
}, 0); // Callback is added to the task queue

console.log('world');

Asynchronous Programming

Callback

const $ = require('jquery');
const API_URL = '<https://api.github.com/repos/facebookincubator/create-react-app/issues?per_page=10>';

$.ajaxSetup({
  dataType: 'json'
});

$.get(API_URL, issues => {
  console.log('Recent 10 issues:');
  issues
    .map(issue => issue.title)
    .forEach(title => console.log(title));
  console.log('Finished printing.');
});

console.log('Fetching...');

Promise

const p = Promise.resolve(1);

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`${ms} milliseconds have passed.`);
      resolve();
    }, ms);
  });
}

delay(1000)
  .then(() => delay(2000))
  .then(() => Promise.resolve('Done'))
  .then(console.log);

console.log('Start');

Async Function

async function func1() {
  return 1;
}

async function func2() {
  return Promise.resolve(2);
}

func1().then(console.log); // 1
func2().then(console.log); // 2

Generator

const co = require('co');
const axios = require('axios');
const API_URL = '<https://api.github.com>';

function* fetchStarCount() {
  const starCount = {};

  // Fetch top repo
  const topRepoRes = yield axios.get(`${API_URL}/search/repositories?q=language:javascript&sort=stars&per_page=1`);

  // Fetch top contributors
  const topMemberRes = yield axios.get(`${API_URL}/repos/${topRepoRes.data.items[0].full_name

}/contributors`);

  starCount.repoName = topRepoRes.data.items[0].name;
  starCount.stars = topRepoRes.data.items[0].stargazers_count;
  starCount.topContributor = topMemberRes.data[0].login;

  return starCount;
}

co(fetchStarCount).then(console.log);