Docs
README
18.3 Async Patterns
Overview
Master common patterns for managing complex asynchronous operations in JavaScript applications.
Sequential vs Parallel Execution
┌─────────────────────────────────────────────────────────────────────────┐
│ Execution Patterns │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ SEQUENTIAL: One after another │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ A │────▶│ B │────▶│ C │ Total: A + B + C │
│ └─────┘ └─────┘ └─────┘ │
│ ─────────────────────────────────▶ time │
│ │
│ PARALLEL: All at once │
│ ┌─────┐ │
│ │ A │──────────────────┐ │
│ └─────┘ │ │
│ ┌─────┐ ├──▶ done Total: max(A, B, C) │
│ │ B │──────────────────┤ │
│ └─────┘ │ │
│ ┌─────┐ │ │
│ │ C │──────────────────┘ │
│ └─────┘ │
│ │
│ BATCHED: Parallel with limits │
│ ┌───┐┌───┐ ┌───┐┌───┐ ┌───┐ │
│ │ A ││ B │────▶│ C ││ D │────▶│ E │ Groups of N │
│ └───┘└───┘ └───┘└───┘ └───┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Common Async Patterns
| Pattern | Use Case | Implementation |
|---|---|---|
| Sequential | Order matters | for...of with await |
| Parallel | Independent tasks | Promise.all |
| Racing | First wins | Promise.race |
| Batching | Rate limiting | Chunked parallel |
| Pipeline | Data transformation | Chain of async |
| Debounce | Limit frequency | Timer reset |
| Throttle | Fixed rate | Time window |
Key Patterns
1. Sequential Processing
async function processSequential(items) {
const results = [];
for (const item of items) {
results.push(await processItem(item));
}
return results;
}
2. Parallel Processing
async function processParallel(items) {
return Promise.all(items.map(processItem));
}
3. Batched Processing
async function processBatched(items, batchSize = 3) {
const results = [];
for (let i = 0; i < items.length; i += batchSize) {
const batch = items.slice(i, i + batchSize);
const batchResults = await Promise.all(batch.map(processItem));
results.push(...batchResults);
}
return results;
}
4. Pipeline Pattern
async function pipeline(value, ...fns) {
let result = value;
for (const fn of fns) {
result = await fn(result);
}
return result;
}
Timing Patterns
┌─────────────────────────────────────────────────────────────────────────┐
│ Debounce vs Throttle │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ DEBOUNCE: Wait for pause │
│ Events: │ │ │ │ │ │ │ │ │ │ │
│ Calls: ▼ ▼ │
│ ───────────────────────────────────▶ │
│ (waits for silence) │
│ │
│ THROTTLE: Fixed intervals │
│ Events: │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ Calls: ▼ ▼ ▼ ▼ │
│ ───────────────────────────────────▶ │
│ (max once per interval) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Summary
- •Use sequential for dependent operations
- •Use parallel for independent operations
- •Use batching for rate-limited APIs
- •Use pipelines for data transformations
- •Use debounce for user input
- •Use throttle for continuous events