ការសរសេរកម្មវិធីអសមកាលនៅក្នុង JavaScript (Callback, Promise, RxJs)

សួស្តី​អ្នក​ទាំងអស់គ្នា។ Sergey Omelnitsky កំពុង​ទាក់ទង។ មិនយូរប៉ុន្មានកន្លងទៅនេះ ខ្ញុំបានរៀបចំការផ្សាយលើការសរសេរកម្មវិធីដែលមានប្រតិកម្ម ជាកន្លែងដែលខ្ញុំបាននិយាយអំពីអសមកាលនៅក្នុង 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(function cb1() {… }) ត្រូវបានប្រតិបត្តិ។ កម្មវិធីរុករកតាមអ៊ីនធឺណិតបង្កើតកម្មវិធីកំណត់ម៉ោងដែលជាផ្នែកមួយនៃ Web API ។ វានឹងធ្វើការរាប់ថយក្រោយ។

7) ពាក្យបញ្ជា setTimeout(function cb1() {... }) បានបញ្ចប់ការងាររបស់ខ្លួន ហើយត្រូវបានដកចេញពីជង់ការហៅ។

8) ពាក្យបញ្ជា console.log('Bye') ត្រូវបានបន្ថែមទៅជង់ការហៅ។

9) ពាក្យបញ្ជា console.log('Bye') ត្រូវបានប្រតិបត្តិ។

10) ពាក្យបញ្ជា console.log('Bye') ត្រូវបានយកចេញពីជង់ការហៅ។

11) បន្ទាប់ពីយ៉ាងហោចណាស់ 5000 ms បានកន្លងផុតទៅ កម្មវិធីកំណត់ម៉ោងនឹងបញ្ចប់ ហើយដាក់ callback cb1 នៅក្នុងជួរ callback។

12) រង្វិលជុំព្រឹត្តិការណ៍យកមុខងារ cb1 ពីជួរហៅត្រឡប់មកវិញហើយដាក់វានៅលើជង់ការហៅ។

13) មុខងារ cb1 ត្រូវបានប្រតិបត្តិ ហើយបន្ថែម console.log('cb1') ទៅក្នុង call stack ។

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 អាចត្រូវបានអនុវត្តដោយមុខងារប៉ុណ្ណោះ។ ពួកវាអាចត្រូវបានបញ្ជូនដូចអថេរផ្សេងទៀតទៅមុខងារផ្សេងទៀត។ នេះជារបៀបដែលការហៅត្រឡប់មកវិញបានកើត។ ហើយវាត្រជាក់ សប្បាយ និងលេងសើច រហូតដល់វាប្រែទៅជាសោកសៅ សោកសៅ និងសោកសៅ។ ហេតុអ្វី? វាសាមញ្ញ៖

• នៅពេលដែលភាពស្មុគស្មាញនៃកូដកើនឡើង គម្រោងនេះប្រែទៅជាមិនច្បាស់លាស់ និងជាប់គាំងម្តងហើយម្តងទៀត - "callback hell" ។
• ការដោះស្រាយកំហុសអាចងាយនឹងខកខាន។
• អ្នកមិនអាចត្រឡប់កន្សោមជាមួយនឹងការត្រឡប់មកវិញបានទេ។

ជាមួយនឹងការមកដល់នៃ 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
• យើងអាចដោះស្រាយអសមកាលដែលបានដាក់ដោយប្រើប្រាស់ async/await

ប៉ុន្តែការសន្យាមានដែនកំណត់របស់វា។ ជាឧទាហរណ៍ ការសន្យាមិនអាចលុបចោលបានទេបើគ្មានការរាំជាមួយ tambourine ហើយអ្វីដែលសំខាន់បំផុតនោះគឺថាវាដំណើរការជាមួយនឹងតម្លៃមួយ។

ជាការប្រសើរណាស់ យើងបានចូលទៅជិតការសរសេរកម្មវិធីដែលមានប្រតិកម្មយ៉ាងរលូន។ ធុញទ្រាន់? ជាសំណាងល្អ អ្នកអាចទៅធ្វើតែខ្លះ គិតអំពីវា ហើយត្រលប់មកអានបន្ថែម។ ហើយខ្ញុំនឹងបន្ត។

កម្មវិធីដែលមានប្រតិកម្ម គឺជាគំរូនៃការសរសេរកម្មវិធីដែលផ្តោតលើលំហូរទិន្នន័យ និងការផ្លាស់ប្តូរការផ្សព្វផ្សាយ។ សូមក្រឡេកមើលឱ្យកាន់តែច្បាស់ថាតើស្ទ្រីមទិន្នន័យគឺជាអ្វី។

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

ចូរស្រមៃថាយើងមានកន្លែងបញ្ចូល។ យើងកំពុងបង្កើតអារេមួយ ហើយសម្រាប់រាល់ keyup នៃព្រឹត្តិការណ៍បញ្ចូល យើងនឹងរក្សាទុកព្រឹត្តិការណ៍នៅក្នុងអារេរបស់យើង។ ក្នុងពេលជាមួយគ្នានេះខ្ញុំចង់កត់សម្គាល់ថាអារេរបស់យើងត្រូវបានតម្រៀបតាមពេលវេលា i.e. សន្ទស្សន៍នៃព្រឹត្តិការណ៍ក្រោយគឺធំជាងសន្ទស្សន៍នៃព្រឹត្តិការណ៍មុនៗ។ អារេបែបនេះគឺជាគំរូសាមញ្ញនៃលំហូរទិន្នន័យ ប៉ុន្តែវាមិនទាន់ជាលំហូរទេ។ ដើម្បីឱ្យអារេនេះត្រូវបានគេហៅថាស្ទ្រីមដោយសុវត្ថិភាព វាត្រូវតែអាចជូនដំណឹងដល់អតិថិជនមួយចំនួនថាទិន្នន័យថ្មីបានមកដល់វា។ ដូច្នេះយើងមកដល់និយមន័យនៃលំហូរ។

ស្ទ្រីមទិន្នន័យ

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

លំហូរ គឺជាអារេនៃទិន្នន័យដែលបានតម្រៀបតាមពេលវេលាដែលអាចបង្ហាញថាទិន្នន័យបានផ្លាស់ប្តូរ។ ឥឡូវស្រមៃមើលថាតើវាងាយស្រួលប៉ុណ្ណាក្នុងការសរសេរកូដដែលសកម្មភាពមួយតម្រូវឱ្យហៅព្រឹត្តិការណ៍ជាច្រើននៅក្នុងផ្នែកផ្សេងៗនៃកូដ។ យើងគ្រាន់តែជាវស្ទ្រីម ហើយវានឹងជូនដំណឹងដល់យើងនៅពេលមានការផ្លាស់ប្តូរ។ ហើយបណ្ណាល័យ RxJs អាចធ្វើវាបាន។

RxJS គឺជាបណ្ណាល័យសម្រាប់ធ្វើការជាមួយកម្មវិធីអសមកាល និងកម្មវិធីផ្អែកលើព្រឹត្តិការណ៍ ដោយប្រើលំដាប់ដែលអាចសង្កេតបាន។ បណ្ណាល័យផ្តល់នូវប្រភេទមូលដ្ឋាន អាចអង្កេតបាន, ប្រភេទជំនួយជាច្រើន (អ្នកសង្កេតការណ៍, អ្នករៀបចំកាលវិភាគ, មុខវិជ្ជា) និងប្រតិបត្តិករសម្រាប់ធ្វើការជាមួយព្រឹត្តិការណ៍ ដូចជាជាមួយនឹងការប្រមូល (ផែនទី តម្រង កាត់បន្ថយ រាល់ និងស្រដៀងគ្នាពី JavaScript Array) ។

ចូរយើងយល់ពីគោលគំនិតជាមូលដ្ឋាននៃបណ្ណាល័យនេះ។

អាចសង្កេតបាន, អ្នកសង្កេត, អ្នកផលិត

Observable គឺជាប្រភេទមូលដ្ឋានដំបូងដែលយើងនឹងមើល។ ថ្នាក់នេះមានផ្នែកសំខាន់នៃការអនុវត្ត RxJs ។ វាត្រូវបានភ្ជាប់ជាមួយស្ទ្រីមដែលអាចសង្កេតបាន ដែលអាចជាវបានដោយប្រើវិធីសាស្ត្រជាវ។

Observable អនុវត្តយន្តការជំនួយសម្រាប់ការបង្កើតបច្ចុប្បន្នភាព ដែលហៅថា អ្នកសង្កេតការណ៍. ប្រភពនៃតម្លៃសម្រាប់អ្នកសង្កេតការណ៍ត្រូវបានគេហៅថា អ្នកផលិត. នេះអាចជាអារេ អ្នកធ្វើឡើងវិញ រន្ធបណ្តាញ ប្រភេទនៃព្រឹត្តិការណ៍មួយចំនួន។ល។ ដូច្នេះ​យើង​អាច​និយាយ​បាន​ថា​ Observable គឺ​ជា​ conductor រវាង​ Producer និង Observer។

Observable គ្រប់គ្រងព្រឹត្តិការណ៍ Observer បីប្រភេទ៖

• បន្ទាប់ - ទិន្នន័យថ្មី។
• error - កំហុសមួយប្រសិនបើលំដាប់បញ្ចប់ដោយសារករណីលើកលែងមួយ។ ព្រឹត្តិការណ៍នេះក៏បង្កប់ន័យអំពីការបញ្ចប់នៃលំដាប់។
• ពេញលេញ — សញ្ញាអំពីការបញ្ចប់នៃលំដាប់។ នេះមានន័យថានឹងមិនមានទិន្នន័យថ្មីទៀតទេ។

តោះមើលការបង្ហាញ៖

នៅពេលចាប់ផ្តើមយើងនឹងដំណើរការតម្លៃ 1, 2, 3 និងបន្ទាប់ពី 1 វិនាទី។ យើងនឹងទទួលបាន 4 ហើយបញ្ចប់ការផ្សាយរបស់យើង។

គិតខ្លាំងៗ

ហើយបន្ទាប់មកខ្ញុំបានដឹងថាការប្រាប់វាគួរឱ្យចាប់អារម្មណ៍ជាងការសរសេរអំពីវា។ 😀

ការជាវ

នៅពេលដែលយើងជាវការផ្សាយ យើងបង្កើតថ្នាក់ថ្មីមួយ ការជាវដែលផ្តល់ឱ្យយើងនូវសមត្ថភាពក្នុងការឈប់ជាវដោយប្រើវិធីសាស្ត្រ ឈប់ជាវ. យើង​ក៏​អាច​ធ្វើ​ជា​ក្រុម​ការ​ជាវ​ដោយ​ប្រើ​វិធី​នេះ​ដែរ។ បន្ថែម. ជាការប្រសើរណាស់ វាជាឡូជីខលដែលយើងអាចបំបែកក្រុមខ្សែស្រឡាយដោយប្រើ យក. វិធីសាស្ត្របន្ថែម និងលុបចេញទទួលយកការជាវមួយផ្សេងទៀតជាការបញ្ចូល។ ខ្ញុំចង់កត់សម្គាល់ថានៅពេលដែលយើងឈប់ជាវ យើងឈប់ជាវពីការជាវកុមារទាំងអស់ ដូចជាប្រសិនបើពួកគេបានហៅវិធីឈប់ជាវ។ ទៅ​ពេល​ខាង​មុខ។

ប្រភេទនៃស្ទ្រីម

HOT
ក្អម

អ្នកផលិតត្រូវបានបង្កើតនៅខាងក្រៅដែលអាចសង្កេតបាន។
អ្នកផលិតត្រូវបានបង្កើតឡើងនៅខាងក្នុងដែលអាចសង្កេតបាន។

ទិន្នន័យត្រូវបានផ្ទេរនៅពេលដែលអាចសង្កេតបានត្រូវបានបង្កើត
ទិន្នន័យត្រូវបានផ្តល់ជូននៅពេលនៃការជាវ

ត្រូវការតក្កវិជ្ជាបន្ថែមសម្រាប់ការឈប់ជាវ
ខ្សែស្រឡាយបញ្ចប់ដោយខ្លួនឯង។

ប្រើទំនាក់ទំនងមួយទៅច្រើន។
ប្រើទំនាក់ទំនងមួយទៅមួយ។

ការជាវទាំងអស់មានអត្ថន័យដូចគ្នា។
ការជាវគឺឯករាជ្យ

ទិន្នន័យអាចបាត់បង់ ប្រសិនបើអ្នកមិនមានការជាវ
ចេញតម្លៃការផ្សាយឡើងវិញទាំងអស់សម្រាប់ការជាវថ្មី។

ដើម្បីផ្តល់ភាពស្រដៀងគ្នា ខ្ញុំនឹងគិតពីការផ្សាយដ៏ក្តៅគគុកជាភាពយន្តនៅក្នុងរោងកុន។ នៅ​ពេល​ណា​ដែល​អ្នក​មក​ដល់ ចាប់​ពី​ពេល​នោះ​អ្នក​ចាប់​ផ្ដើម​មើល។ ខ្ញុំនឹងប្រៀបធៀបលំហូរត្រជាក់ទៅនឹងការហៅតាមបច្ចេកវិទ្យា។ គាំទ្រ។ អ្នកហៅចូលណាក៏ដោយ ស្តាប់ការថតសារជាសំឡេងពីដើមដល់ចប់ ប៉ុន្តែអ្នកអាចព្យួរទូរស័ព្ទដោយប្រើឈប់ជាវ។

ខ្ញុំចង់កត់សម្គាល់ថាមានលំហូរក្តៅផងដែរ (ខ្ញុំបានឆ្លងកាត់និយមន័យនេះកម្រណាស់ហើយមានតែនៅក្នុងសហគមន៍បរទេសប៉ុណ្ណោះ) - នេះគឺជាលំហូរដែលផ្លាស់ប្តូរពីលំហូរត្រជាក់ទៅជាក្តៅ។ សំណួរកើតឡើង - កន្លែងដែលត្រូវប្រើ)) ខ្ញុំនឹងផ្តល់ឧទាហរណ៍ពីការអនុវត្ត។

ខ្ញុំកំពុងធ្វើការជាមួយ 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 ។ យើងនឹងពិនិត្យមើលមួយចំនួនដែលពេញនិយមបំផុត ហើយព័ត៌មានលម្អិតបន្ថែមអំពីប្រតិបត្តិករអាចត្រូវបានរកឃើញដោយប្រើតំណភ្ជាប់នៅក្នុងព័ត៌មានមានប្រយោជន៍។

ប្រតិបត្តិករ - នៃ

ចូរចាប់ផ្តើមជាមួយប្រតិបត្តិករជំនួយនៃ។ វាបង្កើត Observable ដោយផ្អែកលើតម្លៃសាមញ្ញ។

ប្រតិបត្តិករ - តម្រង

ប្រតិបត្តិករតម្រង ដូចដែលឈ្មោះបានបង្ហាញ ត្រងសញ្ញាស្ទ្រីម។ ប្រសិនបើប្រតិបត្តិករត្រឡប់ពិត វានឹងរំលងបន្ថែមទៀត។

ប្រតិបត្តិករ - យក

យក - យកតម្លៃនៃចំនួន emitters បន្ទាប់ពីនោះខ្សែស្រឡាយបញ្ចប់។

ប្រតិបត្តិករ - 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 ត្រឡប់មិនពិត បន្ទាប់ពីនោះវាឈប់ជាវពីខ្សែស្រឡាយ។

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 )
);  

ប្រតិបត្តិករ - រួមបញ្ចូលគ្នាចុងក្រោយ

Комбинированный оператор combineLatest чем-то похож на promise.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);

ប្រតិបត្តិករ - ផែនទី

ប្រតិបត្តិករបំប្លែងផែនទីបំប្លែងតម្លៃ emitter ទៅជាថ្មីមួយ។

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 - ប្រែក្លាយទៅជាអ្នកសង្កេតការណ៍
• to Promise - បំប្លែងទៅជាការសន្យា

មុខវិជ្ជាមាន ៤ ៥ ប្រភេទ។

គិតខ្លាំងៗ

មាន​មនុស្ស 4 នាក់​កំពុង​និយាយ​នៅ​លើ​ស្ទ្រីម ប៉ុន្តែ​វា​បាន​ក្លាយ​ជា​ពួកគេ​បាន​បន្ថែម​ម្នាក់​ទៀត។ ដូចដែលពួកគេនិយាយថារស់នៅនិងរៀន។

ប្រធានបទសាមញ្ញ new Subject()- ប្រភេទមុខវិជ្ជាសាមញ្ញបំផុត។ បង្កើតដោយគ្មានប៉ារ៉ាម៉ែត្រ។ បញ្ជូនតម្លៃដែលទទួលបានតែបន្ទាប់ពីការជាវ។

ប្រធានបទអាកប្បកិរិយា new BehaviorSubject( defaultData<T> ) - តាមគំនិតរបស់ខ្ញុំ ប្រភេទប្រធានបទទូទៅបំផុត។ ការបញ្ចូលយកតម្លៃលំនាំដើម។ តែងតែរក្សាទុកទិន្នន័យនៃបញ្ហាចុងក្រោយ ដែលត្រូវបានបញ្ជូននៅពេលជាវ។ ថ្នាក់នេះក៏មានវិធីសាស្ត្រតម្លៃមានប្រយោជន៍ផងដែរ ដែលផ្តល់លទ្ធផលតម្លៃបច្ចុប្បន្ននៃចរន្ត។

ចាក់ឡើងវិញប្រធានបទ new ReplaySubject(bufferSize?: number, windowTime?: number) - ការបញ្ចូលអាចយកជាជម្រើសជាអាគុយម៉ង់ទីមួយទំហំនៃសតិបណ្ដោះអាសន្ននៃតម្លៃដែលវានឹងរក្សាទុកនៅក្នុងខ្លួនវា ហើយជាលើកទីពីរនៅពេលដែលយើងត្រូវការការផ្លាស់ប្តូរ។

AsyncSubject new AsyncSubject() - គ្មានអ្វីកើតឡើងនៅពេលជាវទេ ហើយតម្លៃនឹងត្រលប់មកវិញតែពេលបំពេញ។ មាន​តែ​តម្លៃ​ចុងក្រោយ​នៃ​ការ​ផ្សាយ​ប៉ុណ្ណោះ​នឹង​ត្រូវ​បាន​ត្រឡប់​មក​វិញ។

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - ឯកសារនៅស្ងៀមអំពីគាត់ ហើយខ្ញុំឃើញគាត់ជាលើកដំបូង។ បើ​នរណា​ដឹង​ថា​គាត់​ធ្វើ​អ្វី​នោះ សូម​សរសេរ​មក យើង​នឹង​បន្ថែម​វា។

ភវ។ ជាការប្រសើរណាស់, យើងបានគ្របដណ្តប់អ្វីគ្រប់យ៉ាងដែលខ្ញុំចង់ប្រាប់អ្នកនៅថ្ងៃនេះ។ ខ្ញុំសង្ឃឹមថាព័ត៌មាននេះមានប្រយោជន៍។ អ្នកអាចអានបញ្ជីឯកសារយោងដោយខ្លួនឯងនៅក្នុងផ្ទាំងព័ត៌មានមានប្រយោជន៍។

ពប្រយោជន៍

• Ссылка на стрим
• Как работает JS: обзор движка, механизмов времени выполнения, стека вызовов
• Как работает JS: цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
• Как работает Event Loop в JavaSript
• Эволюция асинхронного JavaScript
• Что такое RxJS и почему о нём полезно знать
  
• Практическое применение RxJS
• RxJS Observables Tutorial — Creating & Subscribing to Observables
• RXJS: Hot and Cold Observables
• Классы, функции для создания Observable. Операторы.
• RxJS Operators By Example
• បញ្ជី API
• Разновидности Subject и Расписания в RxJS

ប្រភព: www.habr.com