You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: 1-js/11-async/01-callbacks/article.md
+65-65
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,20 @@
1
1
2
2
3
-
# Introduction: callbacks
3
+
# Įvadas: *callbacks*
4
4
5
5
```warn header="We use browser methods here"
6
-
To demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods; specifically, loading scripts and performing simple document manipulations.
6
+
*Callbackų*, *promise'ų* ir kitų abstrakčių koncepcijų veikimo demonstacijai, bus naudojami naršyklės metodai. Pagrinde bus atliekamos paprastos dokumentų manipuliacijos pasitelkiant skriptus.
7
7
8
-
If you're not familiar with these methods, and their usage in the examples is confusing, or if you would just like to understand them better, you may want to read a few chapters from the [next part](/document) of the tutorial.
8
+
Jeigu šie metodai Jums dar nepažįstami, jų naudojimas pavyzdžiuose trikdo ar tiesiog norėtumėte juos suprasti geriau, pamėginkite paskaityti kelis skyrius iš kitos šių pratybų [dalies](/document).
9
9
```
10
10
11
-
Many actions in JavaScript are *asynchronous*. In other words, we initiate them now, but they finish later.
11
+
Daugelis veiksmų JavaScripte yra *asinchroniški* (*asynchronous*). Kitaip tariant, mes juos inicijuojame dabar, bet jie įvykdomi vėliau.
12
12
13
-
For instance, we can schedule such actions using `setTimeout`.
13
+
Tokį veiksmą ateičiai mes galime suplanuoti naudodami `setTimeout` metodą.
14
14
15
-
There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we'll cover them in later chapters).
15
+
Egzistuoja ir kiti asinchroninių veiksmų pavyzdžiai, tarkime, skriptų ir modulių (*modules*) užkrovimas (juos aptarsime vėlesniuose skyriuose).
16
16
17
-
Take a look at the function `loadScript(src)`, that loads a script with the given `src`:
17
+
Pažvelkite į `loadScript(src)` funkciją, kurį užkrauna skriptą su pateiktu `src`.
18
18
19
19
```js
20
20
functionloadScript(src) {
@@ -24,41 +24,41 @@ function loadScript(src) {
24
24
}
25
25
```
26
26
27
-
It appends to the document the new, dynamically created, tag `<script src="…">`. The browser loads and executes it.
27
+
Ši funkcija prideda (*appends*) naują, dinamiškai sukurtą žymą (*tag*)`<script src="…">`. Naršyklės ją užkrauna ir įvykdo.
28
28
29
-
We can use this function like this:
29
+
Šią funkciją mes galime panaudoti šitaip:
30
30
31
31
```js
32
-
//load and execute the script at the given path
32
+
//užkrauti ir vykdyti nurodytoje vietoje esantį skriptą
33
33
loadScript('/my/script.js');
34
34
```
35
35
36
-
The script is executed "asynchronously", as it starts loading now, but runs later, when the function has already finished.
36
+
Skriptas yra vykdomas „asinchroniškai“. Jis pradeda krautis dabar, bet įvykdomas vėliau, kai funkcijos vykdymas jau būna pasibaigęs.
37
37
38
-
If there's any code below `loadScript(…)`, it doesn't wait until the script loading finishes.
38
+
Jeigu po `loadScript(…)` yra papildomas kodas, jis nelauks kol pasibaigs skripto krovimasis.
39
39
40
40
```js
41
41
loadScript('/my/script.js');
42
-
//the code below loadScript
43
-
//doesn't wait for the script loading to finish
42
+
//kodas žemiau loadScript
43
+
//nelauks kol šio skripto krovimasis baigsis
44
44
// ...
45
45
```
46
46
47
-
Let's say we need to use the new script as soon as it loads. It declares new functions, and we want to run them.
47
+
Sakykime, mes norime panaudoti skriptą, kai tik jis užsikraus – galbūt jis deklaruoja naujas funkcijas ir mes norime jas naudoti.
48
48
49
-
But if we do that immediately after the`loadScript(…)`call, that wouldn't work:
49
+
Bet šitai nesuveiks, jei to imsimės tuoj po`loadScript(…)`iškvietimo:
50
50
51
51
```js
52
-
loadScript('/my/script.js'); //the script has "function newFunction() {…}"
52
+
loadScript('/my/script.js'); //skriptas savyje turi funkciją "function newFunction() {…}"
53
53
54
54
*!*
55
-
newFunction(); //no such function!
55
+
newFunction(); //toksios funkcijos nėra!
56
56
*/!*
57
57
```
58
58
59
-
Naturally, the browser probably didn't have time to load the script. As of now, the`loadScript`function doesn't provide a way to track the load completion. The script loads and eventually runs, that's all. But we'd like to know when it happens, to use new functions and variables from that script.
59
+
Suprantama, naršyklė, greičiausiai, neturėjo laiko užkrauti skriptui. Nuo šio momento funkcija`loadScript`nesuteikia galimybės sekti užsikrovimo baigties. Skriptas užsikrauna ir tiesiog yra įvykdomas. Bet mūsų tikslas yra žinoti, kada tai įvyksta, kad galėtume naudoti minėto skripto sukurtas naujas funkcijas ir kintamuosius.
60
60
61
-
Let's add a `callback`function as a second argument to `loadScript`that should execute when the script loads:
61
+
Pridėkime `callback`funkciją kaip antrą `loadScript`funkcijos argumentą, kuri turėtų būti vykdoma, kai skriptas užsikraus:
62
62
63
63
```js
64
64
functionloadScript(src, *!*callback*/!*) {
@@ -73,19 +73,19 @@ function loadScript(src, *!*callback*/!*) {
73
73
}
74
74
```
75
75
76
-
Now if we want to call new functions from the script, we should write that in the callback:
76
+
Jeigu mes norime iškviesti naujas funkcijas iš skripto, mes turėtume tai aprašyti *callback'e*:
77
77
78
78
```js
79
79
loadScript('/my/script.js', function() {
80
-
//the callback runs after the script is loaded
81
-
newFunction(); //so now it works
80
+
// callback'as vykdomas po skripto užsikrovimo
81
+
newFunction(); //dabar fukncija veikia
82
82
...
83
83
});
84
84
```
85
85
86
-
That's the idea: the second argument is a function (usually anonymous) that runs when the action is completed.
86
+
Idėja tokia: antrasis argumentas yra funkcija (dažniausia anoniminė), kuri paleidžiama, kai veiksmas yra užbaigtas.
87
87
88
-
Here's a runnable example with a real script:
88
+
Štai veikiantis pavyzdys su realiu skriptu:
89
89
90
90
```js run
91
91
functionloadScript(src, callback) {
@@ -98,20 +98,20 @@ function loadScript(src, callback) {
That's called a "callback-based" style of asynchronous programming. A function that does something asynchronously should provide a `callback` argument where we put the function to run after it's complete.
106
+
Tai vadinama *callback'ais* grįstu (*callback-based*) asinchroniniu programavimu – kažką asinchroniškai vykdanti funkcija, turėtų savyje turėti *callback* argumentą, į kurią galima įdėti kitą funkciją, įvykdomą pirmajai pasibaigus.
107
107
108
-
Here we did it in `loadScript`, but of course, it's a general approach.
108
+
Mes panašiai paderėme pavyzdynėje `loadScript` funkcijoje.
109
109
110
-
## Callback in callback
110
+
## *Callback* funkcija *callback* funkcijoje
111
111
112
-
How can we load two scripts sequentially: the first one, and then the second one after it?
112
+
O kaip paleisti du skriptus paeiliui? Pirmą, o po jo – antrą.
113
113
114
-
The natural solution would be to put the second `loadScript`call inside the callback, like this:
114
+
Naturalus sprendimas būtų įdėti antrąjį `loadScript`išvietimą *callbacke*, štai taip:
So, every new action is inside a callback. That's fine for few actions, but not good for many, so we'll see other variants soon.
150
+
Taigi, kekviena nauja operacija yra *callbacko* viduje. Tai priimtina nedideliam kiekiui operacijų. Kitus šios problemos spredimo būdus aptarsime netrukus.
151
151
152
-
## Handling errors
152
+
## Tikdžių valdymas
153
153
154
-
In the above examples we didn't consider errors. What if the script loading fails? Our callback should be able to react on that.
154
+
Ankstesniuose pavyzdžiuose mes visiškai nekalbėjome apie tikdžius (*errors*). Kas, jei skripto krovimasis nepavyksta? Tokiu atveju mūsų *callbackas* turėtų sugebėti į tai reaguoti.
155
155
156
-
Here's an improved version of `loadScript`that tracks loading errors:
156
+
Štai patobulinta `loadScript`versija, kuri suseka krovimosi trikdžius.
157
157
158
158
```js
159
159
functionloadScript(src, callback) {
@@ -169,32 +169,32 @@ function loadScript(src, callback) {
169
169
}
170
170
```
171
171
172
-
It calls`callback(null, script)`for successful load and `callback(error)`otherwise.
172
+
Ji iškviečia`callback(null, script)`sėkmingam krovimui ir `callback(error)`– nesėkmingam.
Once again, the recipe that we used for `loadScript` is actually quite common. It's called the "error-first callback" style.
185
+
Būdas, kuriuo mes pasinaudojome paleisti `loadScript`, yra gan dažnas. Jis pirmenybę teikia trikdžių valdymui *callbackais* ("error-first callback style").
186
186
187
-
The convention is:
188
-
1.The first argument of the `callback` is reserved for an error if it occurs. Then `callback(err)`is called.
189
-
2.The second argument (and the next ones if needed) are for the successful result. Then `callback(null, result1, result2…)`is called.
187
+
Šio stiliaus konvencija teigia:
188
+
1.Pirmasis *callbacko* argumentas yra rezervuotas trikdžiui, jei jis pasitaikys. Čia kviečiama `callback(err)`funkcija.
189
+
2.Antrasis argumentas (ir tolimesni, jei jie reikalingi) yra skirtas sėkmingam rezultatui. Tuomet kviečiama `callback(null, result1, result2…)`funkcija.
190
190
191
-
So the single `callback`function is used both for reporting errors and passing back results.
191
+
Taigi, viena `callback`funkcija yra tinkama ir informavimui apie trikdžius ir rezultatų grąžinimui.
192
192
193
-
## Pyramid of Doom
193
+
## „Pražūties piraminė“ (Pyramid of Doom)
194
194
195
-
From the first look, it's a viable way of asynchronous coding. And indeed it is. For one or maybe two nested calls it looks fine.
195
+
Iš pirmo žvilgstio – tai geras būdas asinchroniniam kodavimui. Vienam ar dviem sugrupuotiems funkcijų išvietimams jis tikrai tinka.
196
196
197
-
But for multiple asynchronous actions that follow one after another we'll have code like this:
197
+
Bet didesniam kiekiui viena kitą sekančių asinchroninių operacijų mes turėsime štai tokį kodą:
3.We load`3.js`, then if there's no error -- do something else`(*)`.
227
+
Šiame kode:
228
+
1.Mes krauname`1.js`, tuomet, jei nėra trikdžių.
229
+
2.Mes krauname`2.js`, tuomet, jei nėra trikdžių.
230
+
3.Mes krauname`3.js`, tuomet, jei nėra trikdžių – darome kažką kito`(*)`.
231
231
232
-
As calls become more nested, the code becomes deeper and increasingly more difficult to manage, especially if we have real code instead of `...`that may include more loops, conditional statements and so on.
232
+
Visi funkcijų išvietimai tampa vis labiau sugrupuoti, kodas gilėja ir tampa sunkiai suvaldomu. Ypač, jei vietoj daugtaškių `...`turime tikrą kodą, su ciklais (*loops*), sąlyginėmis išraiškomis (*conditional statements*) ir t.t.
233
233
234
-
That's sometimes called "callback hell" or "pyramid of doom."
234
+
Tai kartais vadinama „*callbackų* pragaru“ arba „pražūties piramide“.
The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.
262
+
Sugrupuotų funkcijų išvietimų piramidė auga su kiekviena asinchronine operacija ir greitai tampa nekontroliuojama.
263
263
264
-
So this way of coding isn't very good.
264
+
Todėl toks kodo rašymo būdas nėra labai geras.
265
265
266
-
We can try to alleviate the problem by making every action a standalone function, like this:
266
+
Galime sušvelninti padėtį paversdami kiekvieną veiksmą savarankiška funkcija štai taip:
267
267
268
268
```js
269
269
loadScript('1.js', step1);
@@ -295,12 +295,12 @@ function step3(error, script) {
295
295
};
296
296
```
297
297
298
-
See? It does the same, and there's no deep nesting now because we made every action a separate top-level function.
298
+
Matote? Ji daro tą patį, bet šiuo atveju nebeligo komplikuoto operacijų grupavimo, nes kiekvieną veiksmą mes pavertėme atskira *top-level* funkcija.
299
299
300
-
It works, but the code looks like a torn apart spreadsheet. It's difficult to read, and you probably noticed that one needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
300
+
Viskas veikia, tačiau kodas atrodo prastai. Jis sunkiai skaitomas, o skaitytojas turi šokinėti nuo vienos kodo dalies prie kitos. Tai nepatogu, ypač jei skaitantysis nėra susipažinęs su šiuo kodu ir tiksliai nežino, kur ieškoti reikiamos kodo dalies.
301
301
302
-
Also, the functions named `step*`are all of single use, they are created only to avoid the "pyramid of doom." No one is going to reuse them outside of the action chain. So there's a bit of namespace cluttering here.
302
+
Taipogi, funkcijos pavadinimu `step*`yra vienkartinės ir sukurtus tik „pražūties piramidei“ išvengti. Jos nebebus panaudoto šios kodo grandinės išorėje, tad susiduriame su vardų srities (*namespace*) teršimu.
303
303
304
-
We'd like to have something better.
304
+
Mums reikėtų kažko geresnio.
305
305
306
-
Luckily, there are other ways to avoid such pyramids. One of the best ways is to use "promises," described in the next chapter.
306
+
Laimei, yra kitų būtų išvengti minėtų „piramidžių“. Geriausias būdas yra naudoti „pažadus“, aptariamus kitame skyriuje.
0 commit comments