` shows increasing values of `i`, a kind of a progress bar.
+এখন `
` এ `i` এর মান বাড়ছে তা দেখব, যা একটি প্রগ্রেস বারের মত।
-## Use case 3: doing something after the event
+## ব্যবহার ক্রিয়া ৩: ইভেন্ট হ্যান্ডেলের পর কোন কিছু করা
-In an event handler we may decide to postpone some actions until the event bubbled up and was handled on all levels. We can do that by wrapping the code in zero delay `setTimeout`.
+একটি ইভেন্ট হ্যান্ডেলার আমাদের এমনভাবে ডিজাইন করতে হয় যেন হ্যান্ডেলারের সকল টাস্ক শেষ হওয়ার পর যেন আমাদের নতুন টাস্কটি শুরু হয়। এক্ষেত্রে আমরা `setTimeout` এর দ্বিতীয় আর্গুমেন্ট `0` ms সেট করব।
-In the chapter
we saw an example: custom event `menu-open` is dispatched in `setTimeout`, so that it happens after the "click" event is fully handled.
+যা আমরা এই অধ্যায়ে আলোচনা করেছিলাম আমরা একটি উদাহরণ দেখেছিলাম: কাস্টম ইভেন্ট `menu-open` কে `setTimeout` এ আবদ্ধ করেছি, যার ফলে ইভেন্টটি ডিস্প্যাচ হয় সম্পূর্ন "click" ইভেন্টটি হ্যান্ডেল হওয়ার পর।
```js
menu.onclick = function() {
// ...
- // create a custom event with the clicked menu item data
+ // মেনুতে ক্লিকের জন্য একটি কাস্টম ইভেন্ট তৈরি করি
let customEvent = new CustomEvent("menu-open", {
bubbles: true
});
- // dispatch the custom event asynchronously
+ // ইভেন্টটি অ্যাসিঙ্ক্রোনাসলি ডিস্প্যাচ হয়
setTimeout(() => menu.dispatchEvent(customEvent));
};
```
-## Macrotasks and Microtasks
+## Macrotasks এবং Microtasks
-Along with *macrotasks*, described in this chapter, there are *microtasks*, mentioned in the chapter .
+এই অধ্যায়ে আলোচিত *macrotasks* এর পাশাপাশি *microtasks* নামের আরেকটি টার্ম আছে, যা এই অধ্যায়ে আলোচনা করা হয়েছে ।
-Microtasks come solely from our code. They are usually created by promises: an execution of `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's another form of promise handling.
+মাইক্রোটাস্ক আমাদের স্ক্রিপ্ট থেকে জেনারেট হয়। যা promises দ্বারা তৈরি করা হয়: `.then/catch/finally` কে এক্সিকিউশনের সময় এদের হ্যান্ডেলার মাইক্রোটাস্ক হিসেবে বিবেচিত হয়। `await` এর ক্ষেত্রেও বিহাইন্ড দ্যা সীনে মাইক্রোটাস্ক ব্যবহৃত হয়, যেহেতু এটি `promise` এর উপর ভিত্তি করে গড়ে উঠেছে।
-There's also a special function `queueMicrotask(func)` that queues `func` for execution in the microtask queue.
+এছাড়াও একটি বিশেষ ফাংশন আছে `queueMicrotask(func)` যার ফলে `func` টি মাইক্রোটাস্ক কিউতে এক্সিকিউশন হয়।
-**Immediately after every *macrotask*, the engine executes all tasks from *microtask* queue, prior to running any other macrotasks or rendering or anything else.**
+**প্রতিটি *macrotask* এর পর, ইঞ্জিন অন্য সকল *macrotask* এর আগে *microtask* এর সকল টাস্ক সম্পন্ন করবে।**
-For instance, take a look:
+এই উদাহরণটি দেখুন:
```js run
setTimeout(() => alert("timeout"));
@@ -257,23 +254,23 @@ Promise.resolve()
alert("code");
```
-What's going to be the order here?
+এখানে কোড এক্সিকিউশনের ধাপগুলো খেয়াল করছেন?
-1. `code` shows first, because it's a regular synchronous call.
-2. `promise` shows second, because `.then` passes through the microtask queue, and runs after the current code.
-3. `timeout` shows last, because it's a macrotask.
+1. প্রথমে দেখাবে `code`, কেননা এটি একটি সিঙ্ক্রোনাস কল।
+2. এরপর দেখাবে `promise`, কেননা `.then` পাস হয় *microtask* তে, তাই এটি দ্বিতীয় অ্যালার্টে দেখাবে।
+3. সবার শেষে `timeout`, কেননা এটি একটি *macrotask*।
-The richer event loop picture looks like this (order is from top to bottom, that is: the script first, then microtasks, rendering and so on):
+নিচের ছবিটিতে দেখুন (এক্সিকিশনের ক্রমটি হল উপর থেকে নিচে, অর্থাৎ প্রথমে script, তারপর microtasks, rendering ইত্যাদি):
-All microtasks are completed before any other event handling or rendering or any other macrotask takes place.
+ইভেন্ট হ্যান্ডেলিং বা রেন্ডারিং বা অন্যান্য macrotask এর আগে microtasks সম্পন্ন হবে।
-That's important, as it guarantees that the application environment is basically the same (no mouse coordinate changes, no new network data, etc) between microtasks.
+কেন এটি গুরুত্বপূর্ন, এটি আমাদের নিশ্চয়তা প্রদান করে যে microtask চলাকালীন আমাদের অ্যাপ্লিকেশনের এনভায়রনম্যান্ট একই (no mouse coordinate changes, no new network data, ইত্যাদি)।
-If we'd like to execute a function asynchronously (after the current code), but before changes are rendered or new events handled, we can schedule it with `queueMicrotask`.
+আমরা যদি কোন একটি ফাংশনকে রেন্ডার বা কোন একটি ইভেন্ট হ্যান্ডেল করার আগে অ্যাসিঙ্ক্রোনাসলি চালাতে চায় তাহলে `queueMicrotask` দ্বারা করতে পারি।
-Here's an example with "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end. Just like the synchronous code:
+এখানে উপরের "counting progress bar" কে আবার ইমপ্লিমেন্ট করলাম, তবে এখানে `setTimeout` এর বদলে `queueMicrotask` ব্যবহার করছি। যার ফলে রেন্ডারকৃত মানটি দেখব সবার শেষে। সিঙ্ক্রোনাস কোডের মত:
```html run
@@ -301,39 +298,39 @@ Here's an example with "counting progress bar", similar to the one shown previou
```
-## Summary
+## সারাংশ
-A more detailed event loop algorithm (though still simplified compared to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
+ইভেন্ট লুপ সম্পর্কে আরো বিস্তারিত([specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
-1. Dequeue and run the oldest task from the *macrotask* queue (e.g. "script").
-2. Execute all *microtasks*:
- - While the microtask queue is not empty:
- - Dequeue and run the oldest microtask.
-3. Render changes if any.
-4. If the macrotask queue is empty, wait till a macrotask appears.
-5. Go to step 1.
+1. *macrotask* কিউতে থাকা টাস্কগুলো থেকে সবার প্রথমে আসা টাস্ককে রান করে টাস্কটি DEQUE হবে (যেমন "script")।
+2. সকল *microtasks* কে এক্সিকিউট করবে:
+ - যদি microtask কিউটি খালি না হয়:
+ - সবার প্রথমের টাস্কটিকে এক্সিকিউট এর পর দ্বিতীয়টি এভাবে সব টাস্ক এক্সিকিউট করে।
+3. কোন পরিবর্তন হলে রেন্ডার করবে।
+4. যদি *macrotask* কিউ খালি হয় তাহলে আরেকটি *macrotask* সংগঠিত হওয়ার জন্য অপেক্ষা করবে।
+5. এর পর আবার ধাপ 1 এ যাবে।
-To schedule a new *macrotask*:
-- Use zero delayed `setTimeout(f)`.
+একটি নতুন *macrotask* শিডিউলের জন্য:
+- `setTimeout(f)` এর দ্বিতীয় আর্গুমেন্ট `0` ms সেট করি।
-That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react to user events and show progress between them.
+যার সাহায্যে কোন একটি দীর্ঘ টাস্ককে ছোট ছোট টাস্কে বিভক্ত করতে পারি, এবং টাস্কটি চলাকালীন আমাদের ব্রাউজার হ্যাং হবে না।
-Also, used in event handlers to schedule an action after the event is fully handled (bubbling done).
+এছাড়াও কোন একটি ইভেন্ট হ্যান্ডেলার সম্পূর্ন হওয়ার পর অন্য কোন টাস্ক শিডিউলড করতে ব্যবহার করতে পারি।
-To schedule a new *microtask*
-- Use `queueMicrotask(f)`.
-- Also promise handlers go through the microtask queue.
+একটি নতুন *microtask* শিডিউলের জন্য:
+- `queueMicrotask(f)` কল করুন।
+- এছাড়াও প্রমিস হ্যান্ডেলারগুলো microtask queue শিডিউল হয়।
-There's no UI or network event handling between microtasks: they run immediately one after another.
+microtask চলাকালীন আমাদের অ্যাপ্লিকেশনের এনভায়রনম্যান্টের কোন পরিবর্তন হয় না, এরা একটার পর একটা রান হয়।
-So one may want to `queueMicrotask` to execute a function asynchronously, but within the environment state.
+সুতরাং একই এনভায়রনম্যান্ট স্টেটের জন্য কোন ফাংশনকে অ্যাসিঙ্ক্রোনাসলি ব্যবহার করতে আমরা `queueMicrotask` ব্যবহার করতে পারি।
```smart header="Web Workers"
-For long heavy calculations that shouldn't block the event loop, we can use [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
+কোন জটিল গণনার জন্য আমাদের ইভেন্ট লুপকে ব্লক করে রাখা উচিত নয়, এক্ষেত্রে আমরা ব্যবহার করতে পারি [Web Workers](https://html.spec.whatwg.org/multipage/workers.html)।
-That's a way to run code in another, parallel thread.
+এর সাহায্যে আমরা কোডকে প্যারালাল থ্রেডে রান করতে পারি।
-Web Workers can exchange messages with the main process, but they have their own variables, and their own event loop.
+মেইন প্রসেসের সাথে ওয়েব ওয়ার্কার ডাটা আদান প্রদান করতে পারে, তবে এর নিজস্ব ভ্যারিয়েবল এবং ইভেন্ট লুপ আছে।
-Web Workers do not have access to DOM, so they are useful, mainly, for calculations, to use multiple CPU cores simultaneously.
+এটির DOM এ কোন অ্যাক্সেস নেই, সুতরাং জটিল গণনা একাধিক কোরে একইসাথে চালাতে Web Worker ব্যবহার করা হয়।
```