JS Asynchronous

Promise

Asynchronous tasks like Promise will be stacked to event queue.

After main thread’s tasks will be all done, async functions will prevent Javascript’s block. Queued tasks will be run as soon as possible, it returns results to Javascript environment.

Worker

Worker let execute tasks on each individual thread.

But worker can’t assure sync if lots of workers are using multiple threads.

So main’s code and worker’s code have to be individual for preventing this kind of issue.

If main thread’s code and worker thread’s code both share same variables, the side effect will be caused.

Kind of Workers

• Shared Worker
• Dedicated Worker
• Service Worker

Animation

element.animate();

Example

const aliceTumbling = [
  { transform: 'rotate(0) scale(1)' },
  { transform: 'rotate(360deg) scale(0)' }
];

const aliceTiming = {
  duration: 2000,
  iterations: 1,
  fill: 'forwards'
}

const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");

alice1.animate(aliceTumbling, aliceTiming);