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
In the task <info:task/animate-circle>an animated growing circle is shown.
4
+
في المهمة <info:task/animate-circle>تظهر دائرة متنامية متنامية.
5
5
6
-
Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly.
6
+
الآن دعنا نقول أننا لسنا بحاجة فقط إلى دائرة ، ولكن لإظهار رسالة بداخلها. يجب أن تظهر الرسالة *بعد* اكتمال الرسم المتحرك (الدائرة كاملة) ، وإلا ستبدو قبيحة.
7
7
8
-
In the solution of the task, the function `showCircle(cx, cy, radius)`draws the circle, but gives no way to track when it's ready.
8
+
في حل المهمة ، ترسم هذه الدالة `showCircle(cx, cy, radius)`دائرة, لكنها لا تعطي أي وسيلة للتتبع عندما تكون جاهزة.
9
9
10
-
Add a callback argument: `showCircle(cx, cy, radius, callback)`to be called when the animation is complete. The`callback`should receive the circle`<div>`as an argument.
10
+
أضف وسيطة ال callback: `showCircle(cx, cy, radius, callback)`ليتم أستدعاءها عندما الحركه تكتمل. الدالة`callback`يجب أن تستقبل الدائرة`<div>`كوسيط.
11
11
12
-
Here's the example:
12
+
إليك المثال:
13
13
14
14
```js
15
15
showCircle(150, 150, 100, div=> {
@@ -18,8 +18,8 @@ showCircle(150, 150, 100, div => {
18
18
});
19
19
```
20
20
21
-
Demo:
21
+
الناتج:
22
22
23
23
[iframe src="solution" height=260]
24
24
25
-
Take the solution of the task <info:task/animate-circle>as the base.
Copy file name to clipboardExpand all lines: 1-js/11-async/01-callbacks/article.md
+70-69Lines changed: 70 additions & 69 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,68 +1,68 @@
1
1
2
2
3
-
# Introduction: callbacks
3
+
# مقدمة: callbacks
4
4
5
-
```warn header="We use browser methods in examples 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.
5
+
```warn header="نستخدم طرق المتصفح في الأمثلة هنا"
6
+
لتوضيح استخدام الاسترجاعات والوعود والمفاهيم المجردة الأخرى ، سنستخدم بعض طرق المتصفح: على وجه التحديد ، تحميل البرامج النصية وأداء التلاعب بالمستندات البسيطة.
7
7
8
-
If you're not familiar with these methods, and their usage in the examples is confusing, you may want to read a few chapters from the [next part](/document) of the tutorial.
8
+
إذا لم تكن على دراية بهذه الطرق ، وكان استخدامها في الأمثلة مربكًا ، فقد ترغب في قراءة بعض الفصول من [الجزء التالي](/document) من الدورة التعليمية.
9
9
10
-
Although, we'll try to make things clear anyway. There won't be anything really complex browser-wise.
10
+
على الرغم من أننا سنحاول توضيح الأمور على أي حال. لن يكون هناك أي شيء معقد بالفعل في المتصفح.
11
11
```
12
12
13
-
Many functions are provided by JavaScript host environments that allow you to schedule *asynchronous* actions. In other words, actions that we initiate now, but they finish later.
13
+
يتم توفير العديد من الوظائف من خلال بيئات استضافة JavaScript التي تسمح لك بجدولة الاحداث *الغير متزامنة*. بعبارة أخرى ، الإجراءات التي نبدأها الآن ، لكنها تنتهي لاحقًا.
14
14
15
-
For instance, one such function is the`setTimeout` function.
15
+
علي سبيل المثال, داله واحده مثل دالة ال`setTimeout`.
16
16
17
-
There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we'll cover them in later chapters).
17
+
هناك أمثلة أخرى على أرض الواقع من الإجراءات غير المتزامنة ، مثل تحميل البرامج النصية والوحدات (سنغطيها في الفصول اللاحقة).
18
18
19
-
Take a look at the function `loadScript(src)`, that loads a script with the given`src`:
19
+
ألق نظرة علي الدالة `loadScript(src)`, والتي تقوم بتحميل برنامج نصي عند أعطاءها مصدر البرنامج`src`:
20
20
21
21
```js
22
22
functionloadScript(src) {
23
-
//creates a <script> tag and append it to the page
24
-
//this causes the script with given src to start loading and run when complete
23
+
//أنشئ العنصر <script> و قم بأضافته الي الصفحة
24
+
//هذا الذي يفعله البرنامج النصي عند أعطاءه ال src لكي يبدأ تحميل ومن ثم يشغل البرنامج عند الاكتمال
25
25
let script =document.createElement('script');
26
26
script.src= src;
27
27
document.head.append(script);
28
28
}
29
29
```
30
30
31
-
It appends to the document the new, dynamically created, tag `<script src="…">`with given `src`. The browser automatically starts loading it and executes when complete.
31
+
يتم إلحاق المستند الجديد ، الذي تم إنشاؤه ديناميكيًا ، العنصر `<script src="…">`نعطي له مصدر البرنامج النصي `src`. المتصفح بتحميله تلقائياً و يقوم بتشغيله عند اكتمال التحميل.
32
32
33
-
We can use this function like this:
33
+
نحن نستطيع أستخدام هذه الدالة كما موضح بالأسفل:
34
34
35
35
```js
36
-
//load and execute the script at the given path
36
+
//تحميل وتنفيذ البرنامج النصي في المسار المحدد
37
37
loadScript('/my/script.js');
38
38
```
39
39
40
-
The script is executed "asynchronously", as it starts loading now, but runs later, when the function has already finished.
40
+
يتم تنفيذ البرنامج النصي "بشكل غير متزامن" ، حيث يبدأ التحميل الآن ، ولكن يتم تشغيله لاحقًا ، عندما تنتهي الوظيفة بالفعل.
41
41
42
-
If there's any code below `loadScript(…)`, it doesn't wait until the script loading finishes.
42
+
اذا كان هناك أي كود أسفل ال `loadScript(…)`, فأنه لن ينتظر حتي أنتهاء تحميل الملف النصي.
43
43
44
44
```js
45
45
loadScript('/my/script.js');
46
-
//the code below loadScript
47
-
//doesn't wait for the script loading to finish
46
+
//الكود أسفل ال loadScript
47
+
//لا ينتظر تحميل البرنامج النصي حتى ينتهي
48
48
// ...
49
49
```
50
50
51
-
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.
51
+
لنفترض أننا بحاجة إلى استخدام البرنامج النصي الجديد بمجرد تحميله. تعلن وظائف جديدة ، ونريد تشغيلها.
52
52
53
-
But if we do that immediately after the`loadScript(…)` call, that wouldn't work:
53
+
ولكن أذا فعلنا ذلك مباشرةً بعد أستدعاء الدالة`loadScript(…)`, هذا لن يعمل:
54
54
55
55
```js
56
-
loadScript('/my/script.js'); //the script has "function newFunction() {…}"
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.
63
+
بطبيعة الحال ، ربما لم يكن لدى المتصفح وقت لتحميل البرنامج النصي. اعتبارا من الآن، الدالة`loadScript`لا توفر الوظيفة طريقة لتتبع إكمال التحميل. يتم تحميل البرنامج النصي وتشغيله في النهاية ، هذا كل ما في الأمر. ولكن نود أن نعرف متى يحدث ذلك ، لاستخدام وظائف ومتغيرات جديدة من هذا البرنامج النصي.
64
64
65
-
Let's add a`callback`function as a second argument to `loadScript`that should execute when the script loads:
65
+
دعنا نضيف وظيفة`callback`كوسيطة ثانية إلى`loadScript`التي يجب تنفيذها عند تحميل البرنامج النصي:
66
66
67
67
```js
68
68
functionloadScript(src, *!*callback*/!*) {
@@ -77,19 +77,19 @@ function loadScript(src, *!*callback*/!*) {
77
77
}
78
78
```
79
79
80
-
Now if we want to call new functions from the script, we should write that in the callback:
80
+
الآن إذا أردنا استدعاء وظائف جديدة من البرنامج النصي ، يجب أن نكتب ذلك في رد الاتصال:
81
81
82
82
```js
83
83
loadScript('/my/script.js', function() {
84
-
//the callback runs after the script is loaded
85
-
newFunction(); //so now it works
84
+
//يعمل دالة ال callback بعد تحميل البرنامج النصي
85
+
newFunction(); //حتى الآن يعمل
86
86
...
87
87
});
88
88
```
89
89
90
-
That's the idea: the second argument is a function (usually anonymous) that runs when the action is completed.
90
+
هذه هي الفكرة: الوسيطة الثانية هي وظيفة (عادة ما تكون مجهولة المصدر) يتم تشغيلها عند اكتمال الإجراء.
91
91
92
-
Here's a runnable example with a real script:
92
+
إليك مثال قابل للتشغيل مع نص حقيقي:
93
93
94
94
```js run
95
95
functionloadScript(src, callback) {
@@ -102,20 +102,21 @@ function loadScript(src, callback) {
alert(`Cool, the script ${script.src} is loaded`);
105
-
alert( _ ); //function declared in the loaded script
105
+
alert( _ ); //دالة معلن عنها في البرنامج النصي المحمل
106
106
});
107
107
*/!*
108
108
```
109
109
110
-
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.
110
+
وهذا ما يسمى نمط "قائم على الاسترجاع" للبرمجة غير المتزامنة. يجب أن توفر الدالة التي تفعل شيئًا بشكل غير متزامن وسيطة `callback`حيث نضع الوظيفة قيد التشغيل بعد اكتمالها.
111
111
112
-
Here we did it in `loadScript`, but of course it's a general approach.
113
112
114
-
## Callback in callback
113
+
هنا فعلنا ذلك `loadScript`, ولكن بالطبع هذا نهج عام.
115
114
116
-
How can we load two scripts sequentially: the first one, and then the second one after it?
115
+
## Callback في callback
117
116
118
-
The natural solution would be to put the second `loadScript` call inside the callback, like this:
117
+
كيف يمكننا تحميل نصين على التوالي: الأول والثاني بعده؟
118
+
119
+
الحل الطبيعي أن نضع أستدعاء ال `loadScript` الثاني داخل دالة الcallback, مثل هذا:
3.We load `3.js`, then if there's no error -- do something else`(*)`.
232
+
في الكود الذي بالأعلي:
233
+
1.نحن نحمل ال `1.js`, أذا لم يكن هناك خطأ.
234
+
2.نحن نحمل ال `2.js`, أذا لم يكن هناك خطأ.
235
+
3.نحن نحمل ال `3.js`, أذا لم يكن هناك خطأ -- أفعل بعض الشئ غيره`(*)`.
235
236
236
-
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.
237
+
عندما تصبح الأستدعاءات أكثر تداخلًا ، تصبح الشفرة أعمق وتزداد صعوبة إدارتها ، خاصة إذا كان لدينا رمز حقيقي بدلاً من `...`قد يتضمن المزيد من الحلقات ، والعبارات الشرطية وما إلى ذلك.
237
238
238
-
That's sometimes called "callback hell" or "pyramid of doom."
239
+
وهذا ما يُطلق عليه أحيانًا "أسترجاع الجحيم" أو "هرم الموت".
The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.
267
+
ينمو "هرم" الأستدعاءات المتداخلة إلى اليمين مع كل إجراء غير متزامن. سرعان ما يخرج عن السيطرة.
267
268
268
-
So this way of coding isn't very good.
269
+
لذا فإن طريقة كتابة الكود هذه ليست جيدة جدًا.
269
270
270
-
We can try to alleviate the problem by making every action a standalone function, like this:
271
+
يمكننا محاولة التخفيف من المشكلة عن طريق جعل كل عمل وظيفة قائمة بذاتها ، مثل هذا:
271
272
272
273
```js
273
274
loadScript('1.js', step1);
@@ -294,17 +295,17 @@ function step3(error, script) {
294
295
if (error) {
295
296
handleError(error);
296
297
} else {
297
-
// ...continue after all scripts are loaded (*)
298
+
// ...يتم تنفيذ الاكواد هنا بعد تحميل كل الملفات (*)
298
299
}
299
300
};
300
301
```
301
302
302
-
See? It does the same, and there's no deep nesting now because we made every action a separate top-level function.
303
+
نرى؟ إنه يفعل نفس الشيء ، ولا يوجد تداخل عميق الآن لأننا جعلنا كل إجراء وظيفة منفصلة من المستوى الأعلى.
303
304
304
-
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.
305
+
إنه يعمل ، لكن الرمز يبدو وكأنه جدول بيانات ممزق. من الصعب قراءتها ، وربما لاحظت أن المرء يحتاج إلى القفز بين القطع أثناء قراءتها. هذا غير مريح ، خاصة إذا لم يكن القارئ على دراية بالكود ولا يعرف أين يقفز.
305
306
306
-
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.
307
+
أيضاً, الدوال التي تم تسميتها `step*`كلها تستخدم علي حدي, يتم إنشاؤها فقط لتجنب "هرم الموت". لا أحد سيعيد استخدامها خارج سلسلة العمل. لذلك هناك القليل من فوضى مساحة الاسم هنا.
307
308
308
-
We'd like to have something better.
309
+
نود الحصول على شيء أفضل.
309
310
310
-
Luckily, there are other ways to avoid such pyramids. One of the best ways is to use "promises," described in the next chapter.
311
+
لحسن الحظ ، هناك طرق أخرى لتجنب مثل هذه الأهرامات. أحد أفضل الطرق هو استخدام "promises" الموضحة في الفصل التالي.
0 commit comments