Skip to content

Introduction: callbacks #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehradsadeghi merged 1 commit into from
Dec 9, 2020
Merged

Introduction: callbacks #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 12 additions & 15 deletions 1-js/11-async/01-callbacks/01-animate-circle-callback/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
# انیمیشن دایره با فراخوانی
در تمرینِ <info:task/animate-circle> یک دایره با که انیمیشن گذاری بزرگ میشود نشان داده شده است.

# Animated circle with callback
حالا برای ما فقط یک دایره کافی نیست ما میخواهیم یک پیغام درون آن داشته باشیم. پیغام باید *بعد * از تمام شدن انیمیشن به نمایش دربیاید (دایره کامل بزرگ شود) در غیر اینصورت زننده و بدشکل خواهد بود.
در راه حل داده شده برای تمرین تابع `showCircle(cx, cy, radius)` یک دایره رسم میکند ولی چیزی برای نشان دادن اتمام آن وجود ندارد.

In the task <info:task/animate-circle> an animated growing circle is shown.
یک آرگومانِ فراخوان به آن اضافه کنید که در زمان اتمام انیمیشن اجرا شود : `showCircle(cx, cy, raduis, callback)`.
تابع `callback` باید `<div>` را به عنوان آرگومان بگیرد.

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.

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.

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.

Here's the example:
و یک مثال:

```js
showCircle(150, 150, 100, div => {
div.classList.add('message-ball');
div.append("Hello, world!");
div.classList.add("message-ball");
div.append("Hello, world!");
});
```
پیش نمایش:

Demo:

[iframe src="solution" height=260]
[iframe src="solution" height=250]

Take the solution of the task <info:task/animate-circle> as the base.
راه حل اراعه شده در تمرینِ <info:task/animate-circle> را به عنوان پایه استفاده کنید.
Loading