{"id":36774,"date":"2019-10-31T22:13:44","date_gmt":"2019-10-31T19:13:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs\/"},"modified":"2019-10-31T22:13:44","modified_gmt":"2019-10-31T19:13:44","slug":"asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","status":"publish","type":"post","link":"https:\/\/prohoster.info\/sq\/blog\/novosti-interneta\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Programimi asinkron n\u00eb JavaScript. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

P\u00ebrsh\u00ebndetje t\u00eb gjith\u00ebve. K\u00ebtu \u00ebsht\u00eb Omelnytskiy Serhiy. Para pak kohe mbajta nj\u00eb transmetim p\u00ebr programimin reaktiv, ku flas p\u00ebr asinkronitetin n\u00eb JavaScript. Sot do doja t\u00eb p\u00ebrmbledh k\u00ebt\u00eb material. <\/p>\n

<\/p>\n

\"Programimi<\/p>\n

<\/p>\n

Por para se t\u00eb fillojm\u00eb me materialin kryesor, na nevojitet nj\u00eb hyrje. Le t\u00eb fillojm\u00eb me definita: \u00e7far\u00eb \u00ebsht\u00eb staku dhe radhitja?
\nStaku <\/strong>\u2014 \u00ebsht\u00eb nj\u00eb koleksion, elementet e t\u00eb cilit merret sipas parimit \"i fundit i hyr\u00eb, i pari i dal\u00eb\" LIFO
\nRadhitja <\/strong>\u2014 \u00ebsht\u00eb nj\u00eb koleksion, elementet e t\u00eb cilit merret sipas parimit \"i pari i hyr\u00eb, i pari i dal\u00eb\" FIFO<\/p>\n

<\/p>\n

Mir\u00eb, t\u00eb vazhdojm\u00eb. <\/p>\n

<\/p>\n

\"Programimi<\/p>\n

<\/p>\n

JavaScript \u00ebsht\u00eb nj\u00eb gjuh\u00eb programimi nj\u00ebp\u00ebrmasore. Kjo do t\u00eb thot\u00eb se ka vet\u00ebm nj\u00eb rrjedh\u00eb ekzekutimi dhe nj\u00eb stok, n\u00eb t\u00eb cilin vendosen funksionet n\u00eb radh\u00eb p\u00ebr ekzekutim. Si pasoj\u00eb, n\u00eb nj\u00eb moment t\u00eb vet\u00ebm JavaScript mund t\u00eb ekzekutoj\u00eb vet\u00ebm nj\u00eb operacion, operacione t\u00eb tjera do t\u00eb presin n\u00eb radh\u00eb derisa t\u00eb thirren. <\/p>\n

<\/a><\/noindex><\/p>\n

Staku i thirrjeve<\/strong> \u2014 \u00ebsht\u00eb nj\u00eb struktur\u00eb t\u00eb dh\u00ebnash q\u00eb, n\u00eb terma t\u00eb thjesht\u00eb, regjistron informacionin mbi vendin n\u00eb program ku ndodhemi. N\u00ebse kalojm\u00eb n\u00eb nj\u00eb funksion, ne vendosim nj\u00eb regjistrim p\u00ebr t\u00eb n\u00eb maj\u00eb t\u00eb stack-ut. Kur kthehemi nga funksioni, ne nxjerrim elementin m\u00eb t\u00eb lart\u00eb nga stack-u dhe p\u00ebrfundojm\u00eb atje ku e kemi thirrur k\u00ebt\u00eb funksion. Kjo \u00ebsht\u00eb e gjitha q\u00eb mund t\u00eb b\u00ebj\u00eb stack-u. Tani nj\u00eb pyetje mjaft interesante. Si funksionon at\u00ebher\u00eb asinkroniciteti n\u00eb JavaScript?<\/p>\n

<\/p>\n

\"Programimi<\/p>\n

<\/p>\n

N\u00eb t\u00eb v\u00ebrtet\u00eb, p\u00ebrve\u00e7 stack-ut, n\u00eb shfletues ka nj\u00eb radh\u00eb t\u00eb ve\u00e7ant\u00eb p\u00ebr t\u00eb punuar me at\u00eb q\u00eb quhet WebAPI. Funksionet nga kjo radh\u00eb do t\u00eb ekzekutohen n\u00eb rend\u00ebsi vet\u00ebm pasi stack-u t\u00eb jet\u00eb plot\u00ebsisht i zbraz\u00ebt. Vet\u00ebm pas k\u00ebsaj ato vendosen nga radh\u00eb n\u00eb stack p\u00ebr t'u ekzekutuar. N\u00ebse n\u00eb stack aktualisht ndodhet t\u00eb pakt\u00ebn nj\u00eb element, ato nuk mund t\u00eb hyjn\u00eb n\u00eb stack. Pik\u00ebrisht p\u00ebr k\u00ebt\u00eb arsye thirrjet e funksioneve me timeout shpesh nuk jan\u00eb t\u00eb sakta n\u00eb koh\u00eb, sepse funksioni nuk mund t\u00eb hyj\u00eb nga radh\u00eb n\u00eb stack derisa ai t\u00eb jet\u00eb i plot\u00eb. <\/p>\n

<\/p>\n

Le t\u00eb shqyrtojm\u00eb shembullin e m\u00ebposht\u00ebm dhe t\u00eb merremi me \"ekzekutimin\" e tij hap pas hapi. Po ashtu, do t\u00eb shikojm\u00eb se \u00e7far\u00eb ndodh n\u00eb sistem gjat\u00eb k\u00ebsaj procedure.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
1) Deri asnj\u00eb gj\u00eb. Konsola e shfletuesit \u00ebsht\u00eb e past\u00ebr, staku i thirrjeve \u00ebsht\u00eb i zbraz\u00ebt.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
2) \u041f\u043e\u0442\u043e\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Hi’)\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
3) Dhe ajo ekzekutohet.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
4) \u0417\u0430\u0442\u0435\u043c console.log(‘Hi’) \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
5) Tani kalojm\u00eb te komanda setTimeout(function cb1() {\u2026 }). Ajo shtohet n\u00eb stakun e thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
6) Komanda setTimeout(function cb1() {\u2026 }) ekzekutohet. Shfletuesi krijon nj\u00eb timer q\u00eb \u00ebsht\u00eb pjes\u00eb e Web API. Ai do t\u00eb b\u00ebj\u00eb num\u00ebrimin mbrapsht.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
7) Komanda setTimeout(function cb1() {\u2026 }) p\u00ebrfundon dhe hiqet nga staku i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
8) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Bye’)\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
9) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Bye’)\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
10) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Bye’)\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
11) Pasi t\u00eb kalojn\u00eb, t\u00eb pakt\u00ebn, 5000 ms., timer-i p\u00ebrfundojn\u00eb dhe vendos kolb-bekimin cb1 n\u00eb radh\u00ebn e kolb-bekimeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
12) Cikli i ngjarjeve merr funksionin cb1 nga radh\u00eb e kolb-bekimeve dhe e vendos at\u00eb n\u00eb stakun e thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
13) \u0424\u0443\u043d\u043a\u0446\u0438\u044f\u00a0cb1\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u00a0console.log(‘cb1’)\u00a0\u0432 \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
14) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘cb1’)\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
15) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘cb1’)\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
16) Funksioni cb1 hiqet nga staku i thirrjeve.<\/p>\n
<\/p>\n
Shikojm\u00eb nj\u00eb shembull n\u00eb dinamik\u00eb:<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
Tani q\u00eb kemi shqyrtuar se si \u00ebsht\u00eb implementuar asinkronia n\u00eb JavaScript, le t\u00eb flasim shkurtimisht mbi evolucionin e kodit asinkron.<\/p>\n
<\/p>\n
Evolucioni i kodit asinkron.<\/h2>\n
<\/p>\n
a(function (resultsFromA) {\n    b(resultsFromA, function (resultsFromB) {\n        c(resultsFromB, function (resultsFromC) {\n            d(resultsFromC, function (resultsFromD) {\n                e(resultsFromD, function (resultsFromE) {\n                    f(resultsFromE, function (resultsFromF) {\n                        console.log(resultsFromF);\n                    })\n                })\n            })\n        })\n    })\n});<\/code><\/pre>\n
<\/p>\n
Programimi asinkron, si\u00e7 e dim\u00eb ne JavaScript, mund t\u00eb implementohet vet\u00ebm me funksione. Ato mund t\u00eb kalohen si \u00e7do variab\u00ebl tjet\u00ebr n\u00eb funksione t\u00eb tjera. K\u00ebshtu lind\u00ebn callback-\u00ebt. Dhe kjo \u00ebsht\u00eb arg\u00ebtuese dhe g\u00ebzuese derisa t\u00eb shnd\u00ebrrohet n\u00eb trishtim, m\u00ebrzi dhe breng\u00eb. Pse? Sepse \u00ebsht\u00eb shum\u00eb e thjesht\u00eb:<\/p>\n
<\/p>\n