RxJS (Reactive Extensions for JavaScript) একটি শক্তিশালী লাইব্রেরি যা Observables এবং Operators ব্যবহার করে অ্যাসিঙ্ক্রোনাস ডেটা এবং ইভেন্ট স্ট্রিমের উপর কার্যকরীভাবে অপারেশন করার জন্য ব্যবহৃত হয়। এর মধ্যে কিছু গুরুত্বপূর্ণ Filtering Techniques রয়েছে যা ডেটার প্রক্রিয়াকরণ আরও কার্যকরী এবং দক্ষ করে তোলে। এর মধ্যে দুটি জনপ্রিয় ফিল্টারিং অপারেটর হল debounceTime() এবং distinctUntilChanged()।
এই অপারেটরগুলো অ্যাসিঙ্ক্রোনাস ডেটা প্রক্রিয়াকরণের সময়ে নির্দিষ্ট সময় বা অবস্থা অনুযায়ী ডেটা ফিল্টার করতে সহায়তা করে।
debounceTime()
debounceTime() হল একটি জনপ্রিয় ফিল্টারিং অপারেটর, যা সাধারণত ইউজার ইন্টারঅ্যাকশনের ক্ষেত্রে ব্যবহৃত হয়, যেমন টাইপিং, সার্চ, বা স্ক্রলিং। এটি একটি নির্দিষ্ট সময় অন্তর শেষ মান গ্রহণ করে এবং শুধুমাত্র সেই মানটিই সাবস্ক্রাইবারের কাছে পাঠায়। যদি নির্দিষ্ট সময়ের মধ্যে নতুন কোনো মান আসে, তাহলে পূর্বের মানটি বাতিল হয়ে যায় এবং নতুন মানটি নেওয়া হয়।
debounceTime() এর ব্যবহার:
- এটি কেবল শেষ মানটিই গ্রহণ করে:
debounceTime()নির্দিষ্ট সময়ের মধ্যে যখন নতুন মান আসবে, তখন পূর্বের মানকে বাতিল করে এবং শেষ মানটিকে সাবস্ক্রাইবারে পাঠাবে। - এটি ডেটা ফ্লো কমায়: ইউজার ইন্টারঅ্যাকশন যেমন টাইপিং বা স্ক্রলিং এর সময় ডেটার পরিমাণ কমাতে এবং unnecessary ডেটা ট্রাফিক এড়াতে ব্যবহৃত হয়।
উদাহরণ:
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
// একটি ইনপুট ফিল্ডের ইভেন্ট
const input = document.getElementById('search');
fromEvent(input, 'input').pipe(
debounceTime(500), // ৫০০ মিলিসেকেন্ড অপেক্ষা করবে
map(event => event.target.value) // ইনপুটের মান গ্রহণ করবে
).subscribe(value => {
console.log('Search query:', value); // শুধুমাত্র টাইপিং শেষ হলে আউটপুট হবে
});
এখানে, debounceTime(500) ব্যবহার করে, ইউজারের টাইপিংয়ের পর ৫০০ মিলিসেকেন্ড অপেক্ষা করা হয় এবং এর পরে শুধুমাত্র শেষ টাইপিং মানই আউটপুট হিসাবে প্রদর্শিত হয়। এর ফলে অপ্রয়োজনীয় সার্চ রিকোয়েস্ট থেকে রক্ষা পাওয়া যায়।
distinctUntilChanged()
distinctUntilChanged() অপারেটরটি একই মানের পুনরাবৃত্তি ফিল্টার করার জন্য ব্যবহৃত হয়। যখন একটি Observable নির্দিষ্ট মান প্রদান করতে থাকে, তখন এই অপারেটরটি শুধু সেই মানটিকে সাবস্ক্রাইবারে পাঠাবে যদি এটি আগের মানের চেয়ে ভিন্ন হয়। এটি প্রাথমিকভাবে এক্সট্রা বা অপ্রয়োজনীয় ডেটা নিষ্ক্রিয় করতে ব্যবহৃত হয়, যা আগের মানের সাথে সমান হতে পারে।
distinctUntilChanged() এর ব্যবহার:
- এটি পূর্ববর্তী মানের সঙ্গে তুলনা করে: যদি কোনো মান আগের মানের সমান হয়, তবে এটি ফিল্টার হয়ে যাবে এবং সাবস্ক্রাইবারে পাঠানো হবে না।
- এটি এক্সট্রা ডেটা ফিল্টার করে: যখন আপনার দরকার শুধুমাত্র নতুন বা ভিন্ন মান, তখন এটি কার্যকর।
উদাহরণ:
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const observable = of(1, 1, 2, 3, 3, 4, 5, 5);
observable.pipe(
distinctUntilChanged() // আগের মানের সাথে তুলনা করে ফিল্টার করবে
).subscribe(value => console.log(value));
এই উদাহরণে, distinctUntilChanged() শুধুমাত্র বিভিন্ন মানগুলোকেই সাবস্ক্রাইবারে পাঠাবে। আউটপুট হবে:
1
2
3
4
5
এখানে, আগের মানের সাথে যেগুলি সমান ছিল (যেমন 1, 3, 5), সেগুলি ফিল্টার হয়ে গেছে।
debounceTime() এবং distinctUntilChanged() এর সমন্বয়
এই দুটি অপারেটরের সমন্বয় ব্যবহার করে আপনি কিভাবে আরও দক্ষ ফিল্টারিং করতে পারেন তা দেখা যাক। উদাহরণস্বরূপ, যদি আপনি একটি সার্চ ইন্টাফেস তৈরি করেন, যেখানে ইউজারের টাইপিংয়ের পরে শুধুমাত্র নতুন, অর্থপূর্ণ এবং ভিন্ন অনুসন্ধান পাঠানো হবে, তবে আপনি debounceTime() এবং distinctUntilChanged() একসাথে ব্যবহার করতে পারেন।
উদাহরণ:
import { fromEvent } from 'rxjs';
import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators';
const input = document.getElementById('search');
fromEvent(input, 'input').pipe(
debounceTime(500), // ৫০০ মিলিসেকেন্ড অপেক্ষা করবে
map(event => event.target.value), // ইনপুটের মান গ্রহণ করবে
distinctUntilChanged() // যদি আগের মানের সাথে সমান হয়, তবে ফিল্টার করবে
).subscribe(value => {
console.log('Search query:', value); // শুধুমাত্র নতুন এবং ভিন্ন মান হবে
});
এখানে, debounceTime(500) অপেক্ষা করবে যাতে ইউজারের টাইপিং শেষে শুধুমাত্র একবার সার্চ রিকোয়েস্ট পাঠানো হয়, এবং distinctUntilChanged() নিশ্চিত করবে যে শুধুমাত্র যখন নতুন মান আসে, তখনই সার্চ রিকোয়েস্ট পাঠানো হবে।
সারাংশ
- debounceTime(): এটি ইউজার ইনপুট বা অন্য কোনো অ্যাসিঙ্ক্রোনাস ইভেন্টে টাইপিং বা পরিবর্তন ঘটলে, নির্দিষ্ট সময় পর মান গ্রহণ করে। এর মাধ্যমে আপনি অপ্রয়োজনীয় বা অতিরিক্ত ডেটা কমাতে পারেন।
- distinctUntilChanged(): এটি একে অপরের সাথে সমান হওয়া মানগুলোকে ফিল্টার করে দেয়, যাতে একই মানের পুনরাবৃত্তি ডেটা স্ট্রিমে না আসে।
এই দুটি অপারেটরের সমন্বয়ে আপনি আরো নিখুঁত এবং কার্যকরী ডেটা ফিল্টারিং করতে পারেন, যা আপনার অ্যাসিঙ্ক্রোনাস প্রোগ্রামিংয়ের কর্মক্ষমতা উন্নত করবে।
Read more
