แฒกแแแแแ แงแแแแแก. แกแแ แแแ แแแแแแแชแแ แแแฃแแแแจแแ แแ. แชแแขแ แฎแแแก แฌแแ แแ แแฃแแแกแแแแซแแ แกแขแ แแแแแแก แ แแแฅแขแแฃแแ แแ แแแ แแแแ แแแแก แจแแกแแฎแแ, แกแแแแช แแแกแแฃแแ แ แแกแแแฅแ แแแฃแแแแแแ JavaScript-แจแ. แแฆแแก แแกแฃแ แก แแ แแแกแแแแก แจแแกแแฎแแ แจแแแแจแแแแแ แแแแแแแแ.
แแแแ แแ แกแแแแ แแแแแแ แแแกแแแแก แแแแแฌแงแแแ, แจแแกแแแแแ แจแแแแจแแแ แฃแแแ แแแแแแแแแ. แแแแแ แแแแแฌแงแแ แแแแแแ แขแแแแแแ: แ แ แแ แแก แกแขแแแ แแ แ แแแ?
แแแกแขแแก แแ แแก แแแแแฅแชแแ, แ แแแแแก แแแแแแแขแแแ แแแแฆแแแ แแแแ แจแแกแแแแก, แแแ แแแแ แแแแแกแแแแก LIFO แกแแคแฃแซแแแแแ
แ แแแจแ แแ แแก แแแแแฅแชแแ, แ แแแแแก แแแแแแแขแแแ แแแแฆแแแ แแแ แแแแ แจแแกแแแแก, แแแ แแแแ แแแแแกแแแแก FIFO แกแแคแฃแซแแแแแ
แแแ แแ, แแแแแแ แซแแแแ.
JavaScript แแ แแก แแ แแแแแแแแแแ แแ แแแ แแแแ แแแแก แแแ. แแก แแแจแแแแก, แ แแ แแ แกแแแแแก แจแแกแ แฃแแแแแก แแฎแแแแ แแ แแ แซแแคแ แแ แแ แแ แแแกแขแ, แ แแแแแแแช แคแฃแแฅแชแแแแ แแแแก แจแแกแแกแ แฃแแแแแแ. แแแแขแแ, JavaScript-แก แจแแฃแซแแแ แจแแแกแ แฃแแแก แแฎแแแแ แแ แแ แแแแ แแชแแ แแ แแแ แแฃแแแ, แฎแแแ แกแฎแแ แแแแ แแชแแแแ แแแแแแแแแ แแแแแก แ แแแก แกแขแแแแ, แกแแแแ แแ แแแแแแซแแฎแแแแ.
แแแ แแก แแแกแขแ แแ แแก แแแแแชแแแแ แกแขแ แฃแฅแขแฃแ แ, แ แแแแแแช, แแแ แขแแแแ แ แแ แแแฅแแแ, แแฌแแ แก แแแคแแ แแแชแแแก แแ แแแแแแแก แจแแกแแฎแแ แแ แแแ แแแแจแ, แกแแแแช แฉแแแ แแแ แ. แแฃ แคแฃแแฅแชแแแจแ แแแแแแแแแแ แ, แแแก แจแแกแแแแก แแแแแงแแแแแ แกแขแแแแก แแแแ แแแฌแแแจแ. แ แแแแกแแช แแแ แฃแแแแแแ แคแฃแแฅแชแแแแแ, แฉแแแ แแแแแแงแแคแ แงแแแแแแ แแแแ แแแแแแแขแก แแแกแขแแแแ แแ แแแกแ แฃแแแแ แแฅ, แกแแแแช แคแฃแแฅแชแแแก แแฃแฌแแแแแ. แแก แแ แแก แงแแแแแคแแ แ, แ แแกแ แแแแแแแแแช แกแขแแแก แจแแฃแซแแแ. แแฎแแ แแ แซแแแแแ แกแแแแขแแ แแกแ แแแแฎแแ. แแแจแแ แ แแแแ แแฃแจแแแแก แแกแแแฅแ แแแฃแแแแ JavasScript-แจแ?
แกแแแแแแแแแแจแ, แกแขแแแแก แแแ แแ, แแ แแฃแแแ แแแก แแฅแแ แกแแแชแแแแฃแ แ แ แแแ แ.แฌ. WebAPI-แกแแแ แแฃแจแแแแแกแแแแก. แคแฃแแฅแชแแแแ แแ แ แแแจแ แจแแกแ แฃแแแแแ แแแแแแแแแแ แแแแ แแฎแแแแ แแแก แจแแแแแ, แ แแช แแแกแขแ แแแแแแแแ แแแกแฃแคแแแแแแแ. แแฎแแแแ แแแแก แจแแแแแ แแกแแแ แแแแแแกแแแฃแแแ แ แแแแแแ แแแกแขแแแ แจแแกแแกแ แฃแแแแแแ. แแฃ แแแกแขแแแ แแ แแก แแแแแแฃแ แแ แแ แแแแแแแขแ แแ แแแแแแขแจแ, แแแจแแ แแกแแแ แแแ แแแฎแแแแแแแ แกแขแแแแ. แแฎแแแแ แแแแก แแแแ, แคแฃแแฅแชแแแแแก แแแแแซแแฎแแแ แแ แแแก แแแแฌแฃแ แแแ แฎแจแแ แแ แแ แแแฃแกแขแแ, แแแแแแแแ แคแฃแแฅแชแแ แแแ แแแฎแแแแแ แ แแแแแแ แแแกแขแแแแ, แกแแแแ แแก แกแแแกแแ.
แแแแแ แจแแแฎแแแแ แจแแแแแ แแแแแแแแก แแ แแแแแฌแงแแ แแแกแ แแขแแแแแ แแแ แจแแกแ แฃแแแแ. แแแแ แแกแแแ แแแแฎแแ แ แ แฎแแแแ แกแแกแขแแแแจแ.
console.log('Hi);
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) แฏแแ แแ แแคแแ แ แฎแแแแ. แแ แแฃแแแ แแก แแแแกแแแ แแแแแแแ, แแแ แแก แแแกแขแ แชแแ แแแแแ.
2) แจแแแแแ แแ แซแแแแแ console.log('Hi') แแแแขแแแ แแแ แแก แแแกแขแแก.
3) แแ แกแ แฃแแแแแ
4) แจแแแแแ console.log('Hi') แแแแฆแแแฃแแแ แแแ แแก แแแกแขแแแแ.
5) แแฎแแ แแแแแแแ แแ แซแแแแแแแ setTimeout (แคแฃแแฅแชแแ cb1() {โฆ }). แแก แแแแขแแแ แแแ แแแแก แแแกแขแแก.
6) setTimeout(แคแฃแแฅแชแแ cb1() {โฆ }) แแ แซแแแแแ แจแแกแ แฃแแแแฃแแแ. แแ แแฃแแแ แ แฅแแแแก แขแแแแแ แก, แ แแแแแแช แแ แแก แแแ API-แก แแแฌแแแ. แแก แจแแแกแ แฃแแแแก แฃแแฃแแแแแก.
7) setTimeout(function cb1() {โฆ }) แแ แซแแแแแแ แแแแกแ แฃแแ แแฃแจแแแแ แแ แแแแฆแแแฃแแแ แแแ แแก แแแกแขแแแแ.
8) แแ แซแแแแแ console.log('Bye') แแแแขแแแ แแแ แแก แแแกแขแแก.
9) console.log('Bye') แแ แซแแแแแ แจแแกแ แฃแแแแฃแแแ.
10) แแ แซแแแแแ console.log('Bye') แแแแฆแแแฃแแแ แแแ แแก แแแกแขแแแแ.
11) แแแก แจแแแแแ, แ แแช แแแแแแฃแ 5000 ms แแแแแแ, แขแแแแแ แ แแแแแ แแแแ แแ แแงแแแแแก cb1 แแแแแซแแฎแแแแก แฃแแฃแ แแแแแก แ แแแจแ.
12) แแแแแแแแก แแแ แงแฃแแ แแฆแแแก cb1 แคแฃแแฅแชแแแก แแแแแซแแฎแแแแก แ แแแแแแ แแ แฃแแแซแแแแก แแแก แแแ แแก แแแกแขแแแ.
13) แคแฃแแฅแชแแ cb1 แจแแกแ แฃแแแแฃแแแ แแ แแแแขแแแก console.log('cb1') แแแ แแก แแแกแขแแก.
14) แแ แซแแแแแ console.log('cb1') แจแแกแ แฃแแแแฃแแแ.
15) แแ แซแแแแแ console.log('cb1') แแแแฆแแแฃแแแ แแแ แแก แแแกแขแแแแ.
16) แคแฃแแฅแชแแ cb1 แแแแฆแแแฃแแแ แแแ แแก แแแกแขแแแแ.
แแแแแ แจแแแฎแแแแ แแแแแแแแก แแแแแแแแแจแ:
แแแ แแแ, แฉแแแ แจแแแฎแแแแ, แแฃ แ แแแแ แฎแแแแ แแกแแแฅแ แแแฃแแแแ JavaScript-แจแ. แแฎแแ แแแแแแ แแแกแแฃแแ แแ แแกแแแฅแ แแแฃแแ แแแแแก แแแแแฃแชแแแแ.
แแกแแแฅแ แแแฃแแ แแแแแก แแแแแฃแชแแ.
a(function (resultsFromA) {
b(resultsFromA, function (resultsFromB) {
c(resultsFromB, function (resultsFromC) {
d(resultsFromC, function (resultsFromD) {
e(resultsFromD, function (resultsFromE) {
f(resultsFromE, function (resultsFromF) {
console.log(resultsFromF);
})
})
})
})
})
});
แแกแแแฅแ แแแฃแแ แแ แแแ แแแแ แแแ, แ แแแแ แช แฉแแแ แแแชแแ JavaScript-แจแ, แจแแแซแแแแ แแแแฎแแ แชแแแแแแก แแฎแแแแ แคแฃแแฅแชแแแแแ. แแกแแแ แจแแแซแแแแ แแแแแแชแแก, แ แแแแ แช แแแแแกแแแแ แ แกแฎแแ แชแแแแแ แกแฎแแ แคแฃแแฅแชแแแแก. แแกแ แแแแแแแ แแแแแซแแฎแแแแแ. แแ แแก แแ แแก แแแแแ แ, แแฎแแแ แฃแแ แแ แแฎแแแ แฃแแ, แกแแแแ แแ แแแแแแฅแชแแแ แกแแแแแจแ, แกแแแแแจแ แแ แกแแแแแจแ. แ แแขแแ? แฒแก แแแ แขแแแแ:
- แแแแแก แกแแ แแฃแแแก แแแขแแแแกแแแ แแ แแแ, แแ แแแฅแขแ แกแฌแ แแคแแ แแฅแชแแแ แแฃแแแแแแ, แแ แแแ แแฎแแ แฉแแแแแฃแ แแแแแแแแ - โแแแแ แฃแแแแแก แฏแแฏแแฎแแแโ.
- แจแแชแแแแแแแก แแแแฃแจแแแแแ แจแแแซแแแแ แแแแแแแ แแแแแขแแแแ.
- แแฅแแแ แแ แจแแแแซแแแแ แแแแแ แฃแแแ แแแแแแแแฅแแแแแแ แแแแ แฃแแแแแ.
Promise-แแก แแแกแแแแกแแแ แแ แแแ แกแแขแฃแแชแแ แแแแแ แแแฃแแฏแแแแกแแ.
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 2000);
}).then((result) => {
alert(result);
return result + 2;
}).then((result) => {
throw new Error('FAILED HERE');
alert(result);
return result + 2;
}).then((result) => {
alert(result);
return result + 2;
}).catch((e) => {
console.log('error: ', e);
});
- แแแฉแแแ แแแแแ แแแแก แฏแแญแแแแ, แ แแแแช แแแแฃแแฏแแแแกแ แแแแแก แแแแฎแแแแแแ
- แแ แกแแแแแแ แจแแชแแแแแแแก แแฆแแแแแแก แชแแแแ แแแแแแ
- แแแแแขแแแฃแแแ แแแ แแแแแฃแ แ แจแแกแ แฃแแแแแก แจแแกแแซแแแแแแแ Promise.all-แแก แแแแแงแแแแแแ
- แฉแแแ แจแแแแแซแแแ แแแแแแญแ แแ แฉแแแแแฃแแ แแกแแแฅแ แแแฃแแแแ แแกแแแฅแ แแแแแแชแแแก/แแแแแแแแแก แแแแแงแแแแแแ
แแแแ แแ แแแแแ แแแแแก แแแแแกแ แจแแแฆแฃแแแแแ แแฅแแก. แแแแแแแแแ, แแแแแ แแแ แแ แจแแแซแแแแ แแแฃแฅแแแแก แขแแแแฃแ แแ แชแแแแแก แแแ แแจแ แแ แ แแช แแแแแแ แแ, แแก แแฃแจแแแแก แแ แแ แฆแแ แแแฃแแแแแ.
แแแ แแแ, แฉแแแ แจแแฃแคแแ แฎแแแแแ แแแแฃแแฎแแแแแแ แ แแแฅแขแแฃแ แแ แแแ แแแแ แแแแก. แแแแฆแแแ? แแแ แแ, แกแแแแแแแแ แแ, แจแแแแซแแแ แฌแแฎแแแแ แฉแแแก แแแแแแ, แแแคแแฅแ แแ แแ แแแแ แฃแแแ แแ แแแขแ แฌแแแแแแฎแ. แแ แแแแแแ แซแแแแ.
แ แแแฅแขแแฃแแ แแ แแแ แแแแ แแแโ- แแ แแแ แแแแ แแแแก แแแ แแแแแแ, แ แแแแแแช แแ แแแแขแแ แแแฃแแแ แแแแแชแแแแ แแแแแแแแแ แแ แชแแแแแแแแแแก แแแแ แชแแแแแแแ. แแแแแ แฃแคแ แ แแแขแแแฃแ แแ แแแแแแฎแแแแ แ แ แแ แแก แแแแแชแแแแ แแแแแแ.
// ะะพะปััะฐะตะผ ัััะปะบั ะฝะฐ ัะปะตะผะตะฝั
const input = ducument.querySelector('input');
const eventsArray = [];
// ะััะธะผ ะบะฐะถะดะพะต ัะพะฑััะธะต ะฒ ะผะฐััะธะฒ eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);
แฌแแ แแแแแแแแแแ, แ แแ แแแแฅแแก แจแแงแแแแแก แแแแ. แฉแแแ แแฅแแแแ แแแกแแแก แแ แจแแงแแแแแก แแแแแแแแก แงแแแแแ แแแแแแจแแกแแแแก แฉแแแ แแแแแฎแแแ แแแแแแแแก แฉแแแแก แแแกแแแจแ. แแแแกแแแ, แแแแแ แแฆแแแแจแแ, แ แแ แฉแแแแ แแแกแแแ แแแแแแแแฃแแแ แแ แแแก แแแฎแแแแแ, แ.แ. แแแแแแแแแ แแแแแแแแแแก แแแแแฅแกแ แฃแคแ แ แแแแแ, แแแแ แ แแแ แแแแแแ แแแแแแแแแแก แแแแแฅแกแ. แแกแแแ แแแกแแแ แแ แแก แแแแแชแแแแ แแแแแแแก แแแแแ แขแแแแแฃแแ แแแแแแ, แแแแ แแ แแก แฏแแ แแ แแ แแก แแแแแแ. แแแแกแแแแแก, แ แแ แแ แแแกแแแก แฃแกแแคแ แแฎแแ แแฌแแแแก แแแแแแ, แแแ แฃแแแ แจแแซแแแก แ แแแแ แแ แแชแแแแแก แแแแแแแขแแแก, แ แแ แแแกแจแ แแฎแแแ แแแแแชแแแแแ แจแแแแแแแ. แแแ แแแแ, แฉแแแ แแแแแแแแ แ แแแแแแแก แแแแกแแแฆแแ แแแแแแ.
แแแแแชแแแแ แแแแแแ
const { interval1 } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
แแแแแแโแแ แแก แแ แแแก แแแฎแแแแแ แแแแแแแแฃแแ แแแแแชแแแแแแก แแแกแแแ, แ แแแแแแช แจแแแซแแแแ แแแฃแแแแแแแแก, แ แแ แแแแแชแแแแแ แจแแแชแแแแ. แแฎแแ แฌแแ แแแแแแแแแ, แ แแแแแแแ แแแกแแฎแแ แฎแแแแแแ แแแแแก แแแฌแแ แ, แ แแแแแจแแช แแ แแ แแแฅแแแแแแ แแแแแฎแแแก แ แแแแแแแแ แแแแแแแแก แแแแแซแแฎแแแแก แแแแแก แกแฎแแแแแกแฎแแ แแแฌแแแจแ. แฉแแแ แฃแแ แแแแ แแแแแแฌแแ แ แกแขแ แแแแแแก แแ แแก แจแแแแแขแงแแแแแแแก, แ แแแแกแแช แแแฎแแแแ แชแแแแแแแแแ. แแ RxJs แแแแแแแแแแแก แจแแฃแซแแแ แแแแก แแแแแแแแ.
RxJS แแ แแก แแแแแแแแแแ แแกแแแฅแ แแแฃแ แแ แแแแแแแแแแ แแแคแฃแซแแแแฃแ แแ แแแ แแแแแแแ แแฃแจแแแแแกแแแแก แแแแแแ แแแแแแ แแแแแแแ แแแแแแก แแแแแงแแแแแแ. แแแแแแแแแแ แแแแแแแแแ แซแแ แแแแ แขแแแก แแแแแแ แแแแฃแแแแ แแแแแแแแ แแแแฎแแแ แ แขแแแ (แแแแแแแ แแแแแแแ, แแแแ แแแแแ, แกแฃแแแแฅแขแแแ) แแ แแแแ แแขแแ แแแ แแแแแแแแแแแ, แแกแแแ แ แแแแ แช แแแแแฅแชแแแแแแ แแฃแจแแแแแกแแแแก (แ แฃแแ, แคแแแขแ แ, แจแแแชแแ แแแ, แงแแแแแ แแ แแกแแแแกแ JavaScript Array-แแแ).
แแแแแ แแแแแแแ แแ แแแแแแแแแแแก แซแแ แแแแแ แชแแแแแแ.
แแแแแแ แแแแแแ, แแแแแแแ แแแแแแ, แแ แแแแฃแกแแ แ
แแแแแแ แแแแแแ แแ แแก แแแ แแแแ แแแแแก แขแแแ, แ แแแแแกแแช แฉแแแ แแแแแแฎแแแแแ. แแก แแแแกแ แจแแแชแแแก RxJs แแแแฎแแ แชแแแแแแแก แซแแ แแแแ แแแฌแแแก. แแก แแกแแชแแ แแแแ แแแแแแ แแแแแ แแแแแแแแ, แ แแแแแก แแแแแฌแแ แ แจแแกแแซแแแแแแแ แแแแแฌแแ แแก แแแแแแแก แแแแแงแแแแแแ.
Observable แแฎแแ แชแแแแแแก แแแแแฎแแแแแแแก แจแแฅแแแแก แแแแฎแแแ แ แแแฅแแแแแแก, แ.แฌ แแแแแแแ แแแแแแแ. Observer-แแกแแแแก แฆแแ แแแฃแแแแแแแก แฌแงแแ แ แแฌแแแแแ แฌแแแแแ แแจแ แแแ แฆแแแแ. แแก แจแแแซแแแแ แแงแแก แแแกแแแ, แแขแแ แแขแแ แ, แแแ แกแแแแขแ, แ แแแแ แกแแฎแแก แแแแแแแ แแ แ.แจ. แแกแ แ แแ, แจแแแแแซแแแ แแแฅแแแ, แ แแ แแแแแแ แแแแแแ แแ แแก แแแแขแแ แ แแ แแแแฃแกแแ แกแ แแ แแแแแแแ แแแแแแก แจแแ แแก.
Observable แแแ แแแแก แกแแแ แกแแฎแแก แแแแแแแ แแแแแแก แแแแแแแแแก:
- แจแแแแแแ - แแฎแแแ แแแแแชแแแแแ
- แจแแชแแแแ - แจแแชแแแแ, แแฃ แแแแแแแแแแ แแแ แจแแฌแงแแ แแแแแแแแแแกแแก แแแแ. แแก แแแแแแแ แแกแแแ แแฃแแแกแฎแแแแก แแแแแแแ แแแแก แแแกแแกแ แฃแแก.
- แกแ แฃแแ - แกแแแแแแ แแแแแแแแแแ แแแแก แแแกแ แฃแแแแแก แจแแกแแฎแแ. แแก แแแจแแแแก, แ แแ แแฎแแแ แแแแแชแแแแแ แแฆแแ แแฅแแแแ.
แแแแฎแแ แแแแ แแแ แกแแ:
แแแกแแฌแงแแกแจแ แฉแแแ แแแแแแฃแจแแแแแ แแแแจแแแแแแแแแก 1, 2, 3 แแ 1 แฌแแแแก แจแแแแแ. แฉแแแ แแแแแฆแแแ 4-แก แแ แแแแแกแ แฃแแแแ แฉแแแแก แแแแแแก.
แฎแแแแแฆแแ แคแแฅแ แ
แจแแแแแ แแแแฎแแแ, แ แแ แแแแก แแฅแแ แฃแคแ แ แกแแแแขแแ แแกแ แแงแ, แแแแ แ แฌแแ แ. ๐
แแแแแฌแแ แ
แ แแแแกแแช แฉแแแ แแแฌแแ แ แแแแแแก, แฉแแแ แแฅแแแแ แแฎแแ แแแแกแก แแแแแฌแแ แแ แแช แแแแแแแก แแแแแงแแแแแแ แแแแแฌแแ แแก แแแฃแฅแแแแแก แจแแกแแซแแแแแแแแก แแแแซแแแแก แแแฃแฅแแแแ. แฉแแแ แแกแแแ แจแแแแแซแแแ แแแแแฌแแ แแแแก แแแฏแแฃแคแแแ แแแแแแแก แแแแแงแแแแแแ แแแแแแแขแแแ. แแกแ, แแแแแแฃแ แแ, แ แแ แฉแแแ แจแแแแแซแแแ แแแแแแ แแแแแแ แซแแคแแแ แแแแแงแแแแแแ แแแแแฆแแ. แแแแแขแแแแกแ แแ แฌแแจแแแก แแแแแแแแ แแฆแแแแ แกแฎแแ แแแแแฌแแ แแก แจแแงแแแแแ. แแแแแ แแฆแแแแจแแ, แ แแ แแแแแฌแแ แแก แแแฃแฅแแแแแกแแก, แฉแแแ แแฎแกแแแ แงแแแแ แแแแจแแแก แแแแแฌแแ แแก, แแแแฅแแก แแแ แแกแแแ แฃแฌแแแแก แแแแแฌแแ แแก แแแฃแฅแแแแ. แฒแแแแแ แซแ.
แแแแแแแแแก แกแแฎแแแแ
แชแฎแแแ | แฒชแฒแฒแฒ |
---|---|
แแ แแแแฃแกแแ แ แแฅแแแแแ แแแแแแ แแแแแแแแแก แแแฆแแ | แแ แแแแฃแกแแ แ แแฅแแแแแ แแแแแแ แแแแแแ แจแแแแแ |
แแแแแชแแแแ แแแแแชแแแ แฎแแแแ แแแแแแ แแแแแก แจแแฅแแแแก แแ แแก | แแแแแชแแแแแ แแแฌแแแแแฃแแแ แแแแแฌแแ แแก แแ แแก. |
แแแขแ แแแแแแแ แกแแญแแ แ แแแแแฌแแ แแก แแแกแแฃแฅแแแแแแ | แแแแ แแแแแกแแแแแ แฌแงแแแแ |
แแงแแแแแก แแ แ-แแ แ แแแแ แฃแ แแแแ แแแแแก | แแงแแแแแก แแ แแแ แ แฃแ แแแแ แแแแแก |
แงแแแแ แแแแแฌแแ แแก แแ แแ แแ แแแแแ แแแแจแแแแแแแ แแฅแแก | แแแแแฌแแ แแแ แแแแแฃแแแแแแแแแ |
แแแแแชแแแแแ แจแแแซแแแแ แแแแแแ แแแก, แแฃ แแแแแฌแแ แ แแ แแ แแก | แฎแแแแฎแแ แแแแแกแชแแแก แแแแแแแก แงแแแแ แแแแจแแแแแแแแก แแฎแแแ แแแแแฌแแ แแกแแแแก |
แแแแแแแแแก แ แแ แแแแแงแแแ, แชแฎแแ แแแแแแก แแแแแคแแฅแ แแ, แ แแแแ แช แแแแแก แแแแขแ แจแ. แแ แแแก แ แแแแ แแแแแแขแจแ แฉแแแแฎแแแแ, แแ แแแแแแขแแแแ แแแแฌแงแ แงแฃแ แแแ. แแ แจแแแแแแ แแแแ แชแแ แแแแแแก แขแแฅแแแแฃแ แแแ แก. แแฎแแ แแแญแแ แ. แแแแแกแแแแ แ แแแแแแแขแ แฃแกแแแแก แฎแแแแแแ แคแแกแขแแก แฉแแแแฌแแ แก แแแแแแแ แแแแแแแ, แแแแ แแ แจแแแแซแแแแ แแแแแจแแ แแแแแฌแแ แแก แแแฃแฅแแแแแ.
แแแแแ แแฆแแแแจแแ, แ แแ แแ แแก แแแ แแ แฌแแแแแฃแแ แแแแแ แแแแแแแแแช (แแกแแแ แแแแกแแแฆแแ แแแ แซแแแแแ แแจแแแแแแ แแ แแฎแแแแ แฃแชแฎแ แแแแแแจแ แจแแแฎแแแแ แแ) - แแก แแ แแก แแแแแแ, แ แแแแแแช แชแแแ แแแแแแแแแ แชแฎแแแจแ แแแ แแแแฅแแแแแ. แฉแแแแแ แแแแฎแแ - แกแแ แแแแแแแงแแแแ)) แแแแแแแแก แแแแแงแแแ แแ แแฅแขแแแแแแ.
แแ แแแฃแจแแแ Angular-แแแ. แแก แแฅแขแแฃแ แแ แแงแแแแแก rxjs-แก. แกแแ แแแ แแ แแแแแชแแแแแแก แแแกแแฆแแแแ, แแแแแแแแ แชแแ แแแแแก แแ แแแแแแแงแแแแ แแ แแแแแก แจแแแแแแจแ asyncPipe-แแก แแแแแงแแแแแแ. แแฃ แแ แแแแก แ แแแแแแฏแแ แแ แแแแแแแงแแแแ, แแแจแแ, แชแแแ แแแแแแแก แแแแแแ แขแแแแก แแแแฃแแ แฃแแแแแ, แแแแแแฃแแ แแแแ แแแฎแแแก แแแแแชแแแแแก แกแแ แแแ แแกแแแ, แ แแช แ แแแแแ แ แแ แแแฅแแแ แฃแชแแแฃแ แแ. แแ แแฃ แชแแ แแแแแแก แแแแแแแงแแแ แแแแแแ, แแแจแแ แแแแฎแแแแ แแ แแฎแแ แแแฎแแแแ.
แแแแแแแ, แแแแแแแแแก แขแแแแก แแแแแแ แกแแแแแแ แ แแฃแแแ แแแแฌแงแแแแแแแแก, แแแแ แแ แแแแจแแแแแแแแแแ.
แแแแ แแขแแ แแแ
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);
แแแแ แแขแแ แแแ แแแแซแแแแแ แจแแกแแซแแแแแแแแก แแแแแคแแ แแแแแ แแแแแแแแแแ แแฃแจแแแแแก แฃแแแ แ. แแกแแแ แแฎแแแ แแแแแ แแแแแแ แแแแแแจแ แแแแฎแแแ แ แแแแแแแแแแก แแแแขแ แแแก. แฉแแแ แแแแแแฎแแแแแ แ แแแแแแแแ แงแแแแแแ แแแแฃแแแ แฃแแก แแ แแแขแ แแแขแแแ แแแแ แแขแแ แแแแก แจแแกแแฎแแ แจแแแแซแแแแ แแฎแแแแ แกแแกแแ แแแแแ แแแคแแ แแแชแแแก แแแฃแแแแแก แแแแแงแแแแแแ.
แแแแ แแขแแ แแแ - แแแ
แแแแแฌแงแแ แแแแฎแแแ แ แแแแ แแขแแ แแ. แแก แฅแแแแก Observable-แก แแแ แขแแแ แแแแจแแแแแแแแก แกแแคแฃแซแแแแแ.
แแแแ แแขแแ แแแ - แคแแแขแ แ
แคแแแขแ แแก แแแแ แแขแแ แ, แ แแแแ แช แกแแฎแแแ แแแแแแแแแแก, แคแแแขแ แแแก แแแแแแแก แกแแแแแแก. แแฃ แแแแ แแขแแ แ แแแแแ แฃแแแแก true, แแแจแแ แแก แแแแแขแแแแแก แจแแแแแแ.
แแแแ แแขแแ แแแ - แแฆแแแแ
take โ แแฆแแแก แแแแขแแ แแแแก แ แแแแแแแแแก แแแแจแแแแแแแแก, แ แแก แจแแแแแแแช แซแแคแ แแแแแ แแแแ.
Operators-debounceTime
debounceTime - แฃแแฃแแแแแแงแแคแก แแแแขแแ แแแฃแแ แแแแจแแแแแแแแแก, แ แแแแแแแช แฎแแแแแ แแแแแขแแแแแก แจแแ แแก แแแแแแแแฃแ แแ แแแก แแแขแแ แแแแจแ - แแ แแแก แแแขแแ แแแแแก แแแแแแก แจแแแแแ, แแแแแกแชแแแก แแแแ แแแแจแแแแแแแแก.
const { Observable } = Rx;
const { debounceTime, take } = RxOperators;
Observable.create((observer) => {
let i = 1;
observer.next(i++);
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1000ะผั
setInterval(() => {
observer.next(i++)
}, 1000);
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1500ะผั
setInterval(() => {
observer.next(i++)
}, 1500);
}).pipe(
debounceTime(700), // ะะถะธะดะฐะตะผ 700ะผั ะทะฝะฐัะตะฝะธั ะฟัะตะถะดะต ัะตะผ ะพะฑัะฐะฑะพัะฐัั
take(3)
);
แแแแ แแขแแ แแแ-takeWhile
แแกแฎแแแแแก แแแแจแแแแแแแแแก, แกแแแแ takeWhile แแ แแแแแ แฃแแแแก false-แก, แ แแก แจแแแแแแแช แแก แแแแฃแฅแแแแก แแแแแก.
const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;
Observable.create((observer) => {
let i = 1;
observer.next(i++);
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1000ะผั
setInterval(() => {
observer.next(i++)
}, 1000);
}).pipe(
takeWhile( producer => producer < 5 )
);
แแแแ แแขแแ แแแ - combinationLatest
Combina Latest แแแแ แแขแแ แ แแแ แแแแฃแแฌแแแแ แฐแแแแก expect.all-แก. แแก แแแ แแแแแแแก แ แแแแแแแแ แซแแคแก แแ แแจแ. แแแก แจแแแแแ, แ แแช แแแแแแฃแแ แซแแคแ แแแแแแแก แแแแแแฃแ แแ แ แแแแกแแแก, แฉแแแ แแแฆแแแ แฃแแฎแแแก แแแแจแแแแแแแแแก แแแแแแฃแแแกแแแ แแแกแแแแก แกแแฎแแ. แแแ แแ แแแแกแ, แแแแแแแแ แแแฃแแ แแแแแแแแแแแ แแแแแกแแแแ แ แแแแกแแแก แจแแแแแ, แแก แแแกแชแแแก แแฎแแ แแแแจแแแแแแแแแก.
const { combineLatest, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1000ะผั
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
});
const observer_2 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 750ะผั
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
});
combineLatest(observer_1, observer_2).pipe(take(5));
แแแแ แแขแแ แแแ-zip
Zip - แแแแแแแ แแแแจแแแแแแแแก แแแแแแฃแแ แซแแคแแแแ แแ แแงแแแแแแแก แแแกแแแก แแ แแแแจแแแแแแแแแแก แกแแคแฃแซแแแแแ. แแฃ แแแแจแแแแแแแ แแ แแแแแก แ แแแแแแแ แซแแคแแแแ, แแแจแแ แฏแแฃแคแ แแ แฉแแแแงแแแแแแแแ.
const { zip, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1000ะผั
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
});
const observer_2 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 750
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
});
const observer_3 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 500
setInterval(() => {
observer.next('c: ' + i++);
}, 500);
});
zip(observer_1, observer_2, observer_3).pipe(take(5));
แแแแ แแขแแ แแแ - forkJoin
forkJoin แแกแแแ แฃแแ แแแแแ แซแแคแแแก, แแแแ แแ แแก แแแแแกแชแแแก แแแแจแแแแแแแแก แแฎแแแแ แแแจแแ, แ แแแแกแแช แงแแแแ แแแแ แแแกแ แฃแแแแฃแแแ.
const { forkJoin, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1000ะผั
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
}).pipe(take(3));
const observer_2 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 750
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
}).pipe(take(5));
const observer_3 = Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 500
setInterval(() => {
observer.next('c: ' + i++);
}, 500);
}).pipe(take(4));
forkJoin(observer_1, observer_2, observer_3);
แแแแ แแขแแ แแแแก แ แฃแแ
แ แฃแแแก แขแ แแแกแคแแ แแแชแแแก แแแแ แแขแแ แ แแแ แแแฅแแแแก แแแแขแแ แแก แแแแจแแแแแแแแก แแฎแแแจแ.
const { Observable } = Rx;
const { take, map } = RxOperators;
Observable.create((observer) => {
let i = 1;
// ะัะฟััะบะฐะตะผ ะทะฝะฐัะตะฝะธะต ัะฐะท ะฒ 1000ะผั
setInterval(() => {
observer.next(i++);
}, 1000);
}).pipe(
map(x => x * 10),
take(3)
);
แแแแ แแขแแ แแแ - แแแแแแแ แแ, แจแแแฎแแ
แแแแแแแก แแแแ แแขแแ แ แกแแจแฃแแแแแแก แแแซแแแแ แแแแแแแแ แแแแ แแแแ แแแแแแแแแ, แแแฃ แแแแแกแแแแ แ แฅแแแแแแ, แ แแแแแแช แแ แแแแฅแแแแแแก แแแแแแแแแแ แแแแแ.
แฌแแแ แแแแฃแแแแฃแ แ แแแแ แแขแแ แก แจแแฃแซแแแ แชแแแ แแแแแแ แแแแแแฅแชแแแก แชแฎแแ แแแแแแแ.
แฉแแแ แแแแแกแ แฃแแแ แแแแ แแขแแ แแแแแ. แแแแแแแแแ แแแแแแ.
แฎแแแแแฆแแ แคแแฅแ แ
แจแแแแแ แฌแแแแแ แฉแแแก แแแกแแแแแแ. แแแแแฆแแแ แแ แแแแแแแแแแแ ๐
แกแแแแแแ แแแ แแฏแแฎแ
แกแแแแแแ แแแ แแฏแแฎแ แชแฎแแแ แซแแคแแแแก แแแแแแ แ แแแแแแแแแ. แแก แแแแกแแแ แแ แแแแแ แ แฐแแแ แแแแ, แ แแแแแแช แแ แแแ แแฃแแแ แแแฅแแแแแแก แ แแแแ แช แแแแแแ แแแแแแ แแ แแแแแแแ แแแแแแ. แแแแแแแแ แแแแ แแ แแก แชแฎแแแ แแแแแแ, แแแกแ แแแแแฌแแ แ แฃแแแ แแแฃแฅแแแแก. แแฃ แแกแแฃแแ แแแ แซแแ แแแแ แแแแแแแแแ, แแแจแแ แแกแแแแ:
- แจแแแแแแ - แแฎแแแ แแแแแชแแแแแแก แแแแแชแแแ แแแแแแจแ
- แจแแชแแแแ - แจแแชแแแแ แแ แซแแคแแก แจแแฌแงแแแขแ
- แกแ แฃแแ - แซแแคแแก แแแกแ แฃแแแแ
- แแแแแฌแแ แ - แแแแแแฌแแ แแ แแแแแแ
- แแแฃแฅแแแแ - แแแแแฌแแ แแก แแแฃแฅแแแแ แแแแแแแแแ
- asobservable - แแแแแแฅแชแแแ แแแแแแแ แแแแแแ
- toPromise - แแแ แแแแฅแแแแแ แแแแแ แแแแ
แแ แกแแแแแก 4 5 แขแแแแก แกแแแแแ.
แฎแแแแแฆแแ แคแแฅแ แ
แกแขแ แแแแแแแ 4 แแแแแแแแ แกแแฃแแ แแแแ, แแแแ แแ แแฃแ แแ แแ แแ แแแแแแขแแก. แ แแแแ แช แแแแแแแ, แแชแฎแแแ แ แแ แแกแฌแแแแ.
แแแ แขแแแ แกแแแแแ new Subject()
- แฃแแแ แขแแแแกแ แกแแฎแแก แกแแแแแแ. แจแแฅแแแแแแ แแแ แแแแขแ แแแแก แแแ แแจแ. แแแแแก แแแแจแแแแแแแแแก, แ แแแแแแแช แแแแแแ แแฎแแแแ แแแแแฌแแ แแก แจแแแแแ.
แฅแชแแแแก แกแแแแแ new BehaviorSubject( defaultData<T> )
โ แฉแแแ แแแ แแ, แงแแแแแแ แแแแ แชแแแแแฃแแ แขแแแแก แกแแแแแ. แจแแงแแแแ แแฆแแแก แแแแฃแแแกแฎแแแ แแแแจแแแแแแแแก. แงแแแแแแแแก แแแแฎแแแก แแแแ แแแแแจแแแแแก แแแแแชแแแแแก, แ แแแแแแแช แแแแแชแแแฃแแแ แแแแแฌแแ แแกแแก. แแ แแแแกแก แแกแแแ แแฅแแก แกแแกแแ แแแแแ แแแแจแแแแแแแแก แแแแแแ, แ แแแแแแช แแแ แฃแแแแก แแแแแแแก แแแแแแแแ แ แแแแจแแแแแแแแก.
ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number)
โ แจแแงแแแแ แจแแแซแแแแ แกแฃแ แแแแแกแแแแแ แแแ แแแ แแ แแฃแแแแขแแ แแแฆแแก แแแแจแแแแแแแแแแก แแฃแคแแ แแก แแแแ, แ แแแแแกแแช แแก แแแแแกแแแแแ แจแแแแแฎแแแก แแ แแแแ แแ แแ แ, แ แแแแแก แแ แแกแแช แฉแแแ แแแญแแ แแแแ แชแแแแแแแแแ.
AsyncSubject new AsyncSubject()
- แแ แแคแแ แ แฎแแแแ แแแแแฌแแ แแกแแก แแ แฆแแ แแแฃแแแแ แแแแ แฃแแแแแ แแฎแแแแ แแแกแ แฃแแแแแกแแก. แแแแ แฃแแแแแ แแแแแแแก แแฎแแแแ แแแแ แแแแจแแแแแแแ.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>)
- แแแกแแ แแแแฃแแแแขแแชแแ แแฃแแก แแ แแแ แแแแแ แแแแฎแ. แแฃ แแแแแแ แแชแแก แ แแก แแแแแแแก แแแฌแแ แแ แแ แแแแแแแขแแแ.
แคแฃ. แแแ แแแ, แฉแแแ แแแแแแฎแแแแ แงแแแแแคแแ แ, แ แแกแ แแฅแแแช แแแแแแแ แแฆแแก. แแแแแแ แแก แแแคแแ แแแชแแ แกแแกแแ แแแแแ แแงแ. แแฅแแแ แจแแแแซแแแแ แฌแแแแแแฎแแ แแแขแแ แแขแฃแ แแก แกแแ แแแแแฃแแแแแแแแ แกแแกแแ แแแแแ แแแคแแ แแแชแแแก แฉแแแแ แแจแ.
แกแแกแแ แแแแแ แแแคแแ แแแชแแ
https://vk.com/frontend_practice?w=wall-182297870_931 - แแแฃแแ แแแแแแแhttps://habr.com/ru/company/ruvds/blog/337042/ โ แ แแแแ แแฃแจแแแแก JS: แซแ แแแแก แแแแแฎแแแแ, แแแจแแแแแก แแแฅแแแแแแแแ, แแแ แแก แแแกแขแhttps://habr.com/ru/company/ruvds/blog/340508 โ แ แแแแ แแฃแจแแแแก JS: แฆแแแแกแซแแแแแก แชแแแแ, แแกแแแฅแ แแแฃแแแแ แแ แแฅแแแแ แแแแแก แแแกแแฃแแฏแแแแกแแแแแ แฎแฃแแ แแแ แแกแแแฅแ แแแแแแชแแแก / แแแแแแแแแก แแแแแงแแแแแแhttp://vanilla-js.blogspot.com/2014/09/event-loop-javasript.html โ แ แแแแ แแฃแจแแแแก Event Loop JavaSript-แจแhttps://tproger.ru/translations/asynchronous-javascript/ - แแกแแแฅแ แแแฃแแ JavaScript-แแก แแแแแฃแชแแhttps://habr.com/ru/company/ruvds/blog/341880/ โ แ แ แแ แแก RxJS แแ แ แแขแแ แแ แแก แกแแกแแ แแแแแ แแแแก แจแแกแแฎแแ แชแแแแ?https://medium.com/ngx/practical-use-rxjs-81aaab57045c โ RxJS-แแก แแ แแฅแขแแแฃแแ แแแแแงแแแแแhttps://coursetro.com/posts/code/148/RxJS-Observables-TutorialโCreating-&-Subscribing-to-Observables โ RxJS Observables Tutorial โ แจแแฅแแแ แแ แแแแแฌแแ แ Observableshttps://slides.com/zenabsaleem/rxjs-hot-cold-observables#/ - RXJS: แชแฎแแแ แแ แชแแแ แแแแแแ แแแแแแhttps://clck.ru/FiPgB โ แแแแกแแแ, แคแฃแแฅแชแแแแ Observable-แแก แจแแกแแฅแแแแแแ. แแแแ แแขแแ แแแ.https://www.learnrxjs.io/operators/ - RxJS แแแแ แแขแแ แแแ แแแแแแแแแhttps://rxjs.dev/api - API แกแแhttps://clck.ru/FkS8Y - แกแแแแแแแกแ แแ แแแแ แแแแก แฏแแจแแแ RxJS-แจแ
แฌแงแแ แ: www.habr.com