Rxjs Tutorial in Bangla: Using DebounceTime and DistinctUntilChanged in Angular

Posted by

DebounceTime & DistinctUntilChanged in Rxjs | Angular | Bangla Tutorial

DebounceTime & DistinctUntilChanged in Rxjs

ডিবাউন্স টাইম এবং ডিস্টিংট ইউনটিল চেঞ্জ্ড মেথড গুলি Angular এবং Rxjs এর শক্তিশালী সরঞ্জাম। এই মেথডগুলি ব্যবহার করে আমরা সহজেই ইভেন্ট লোডিং, সার্চ এবং ডাটা স্ট্রিমিং এর জন্য উপযোগী কাজ করতে পারি।

DebounceTime

ডিবাউন্স টাইম মেথড একটি ওবসারভেবলের ডাটা স্ট্রিম করার পর নির্দিষ্ট সময়ের জন্য একটি স্যাম্বলড করে রাখে। যদি ডাটা স্ট্রিমিং পুরোপুরি শেষ না হওয়া থাকে, তাহলে ডিবাউন্স টাইম প্রযোজ্য থাকে। যেমনঃ

        
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');

const typeAhead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  debounceTime(300)
);
        
    

DistinctUntilChanged

ডিস্টিংট ইউনটিল চেঞ্জ্ড মেথড ডাটা স্ট্রিমিং করার সময় প্রিভিয়াস ভ্যালু সাথে নতুন ভ্যালুর তুলনা করে তা রিটার্ন করে। তাহলে যদি নতুন ভ্যালুর সাথে প্রিভিয়াস ভ্যালু একই হয়, তাহলে নতুন ডাটা মান রিটার্ন করা হয় না। যেমনঃ

        
import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

const source = from([1, 2, 2, 3, 3, 3, 4, 5, 5, 1]);
const example = source.pipe(distinctUntilChanged());
//output: 1, 2, 3, 4, 5, 1