RxJS A-ից Z — Մաս 2: Hot vs Cold Observables, Schedulers, Practical Use Cases

---

L. Cold vs Hot Observables

Այս տարբերությունը շատ կարևոր է հասկանալու՝ ինչպես է Observable-ն «ստեղծում» տվյալները:

📌 Cold Observable

• Տվյալների հոսքը **սկսվում է յուրաքանչյուր բաժանորդից** հետո
• Տվյալները արտադրում է ներսից (lazy)

 import { Observable } from 'rxjs';
const cold$ = new Observable(observer => {
console.log('Observable started');
observer.next(Math.random());
});

cold$.subscribe(val => console.log('Sub A:', val));
cold$.subscribe(val => console.log('Sub B:', val));

Արդյունք՝ տարբեր random թվեր

🔥 Hot Observable

• Տվյալների հոսքը **սկսվում է անկախ բաժանորդներից**
• Օգտագործվում է՝ Subject, WebSocket, DOM Event և այլն

 import { Subject } from 'rxjs';
const hot$ = new Subject();

hot$.subscribe(val => console.log('Sub A:', val));
hot$.next(Math.random());
hot$.subscribe(val => console.log('Sub B:', val));
hot$.next(Math.random());

Արդյունք՝ Sub B չի ստանա առաջին արժեքը, որովհետև բաժանորդագրվել է ուշ։

M. RxJS Schedulers (Տնօրենում են async/մշակման ժամանակը)

Schedulers թույլ են տալիս կառավարել երբ և ինչպես է Observable-ը կատարում emit/subscribe։

• asyncScheduler – setTimeout-ի պես
• queueScheduler – sync, հերթով
• asapScheduler – Promise microtask

 import { of, asyncScheduler } from 'rxjs'; console.log('Before'); of(1, 2, 3, asyncScheduler).subscribe(val => console.log(val)); console.log('After'); 

Output:

• Before
• After
• 1
• 2
• 3

Այսինքն՝ asyncScheduler-ը կատարում է հաջորդ փուլում (setTimeout-ի պես)

---

N. Real-World Use Case 1: Live Search (Autocomplete)

 fromEvent(searchInput, 'input') .pipe( map(e => e.target.value), debounceTime(300), distinctUntilChanged(), switchMap(query => http.get('/api/search?q=' + query)) ) .subscribe(results => renderResults(results)); 

• debounceTime – սպասում է՝ մինչև typing-ը կանգնի
• distinctUntilChanged – նույն value-ով հարցում չի ուղարկում
• switchMap – նոր հարցում է ուղարկում, հինը չեղարկելով

---

O. Real-World Use Case 2: Button Click Prevent Spamming

 fromEvent(button, 'click') .pipe( throttleTime(2000) ) .subscribe(() => { // Call API or do action console.log('Clicked!'); }); 

Արդյունք՝ սեղմելուց հետո թույլ կտա նոր սեղմում միայն 2վ հետո։

---

P. Combining Observables — combineLatest, forkJoin, zip

• combineLatest – վերադարձնում է վերջին արժեքները, երբ որևէ observable emit է անում
• forkJoin – սպասում է, մինչև բոլորը ավարտեն
• zip – հոսքերը համադրում է ըստ կարգի

 combineLatest([ of(1), interval(1000).pipe(take(3)) ]).subscribe(console.log);