debounce এবং throttle এর মধ্যে পার্থক্য কী?

Question

Accepted Answer

উভয়ই দ্রুত, পুনরাবৃত্তিমূলক ইভেন্টের প্রতিক্রিয়ায় কতবার একটি ফাংশন চলবে তা সীমিত করে — কিন্তু বিভিন্ন টাইমিং কৌশল সহ।

- **Debounce**: ফাংশনটি **N ms এর জন্য কার্যকলাপ বন্ধ হওয়ার পরেই** চালান। প্রতিটি কলে টাইমার রিসেট করে। → "তারা সম্পন্ন না হওয়া পর্যন্ত অপেক্ষা করুন।"
- **Throttle**: ক্রমাগত কার্যকলাপের সময় **N ms প্রতি সর্বাধিক একবার** ফাংশন চালান। → "একটি স্থিতিশীল হারে চালান।"

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Debounce বাস্তবায়ন

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Throttle বাস্তবায়ন

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## কোনটি কখন ব্যবহার করবেন

- **Debounce**: টাইপ করার সময় অনুসন্ধান, স্বয়ংক্রিয় সংরক্ষণ, পুনরায় আকার পরিবর্তন-সমাপ্ত, ব্যবহারকারী টাইপ করা বন্ধ করার পরে যাচাইকরণ — আপনি **চূড়ান্ত** মান চান।
- **Throttle**: স্ক্রল হ্যান্ডলার, mousemove, টানা, হার-সীমাবদ্ধকরণ — আপনি কর্মটি চলমান থাকার সময় **পর্যায়ক্রমিক** আপডেট চান।

## কেন এটি গুরুত্বপূর্ণ

উভয়ই ব্যয়বহুল কাজ (API কল, লেআউট পুনর্গণনা) প্রতি সেকেন্ডে শত শত বার চালানো প্রতিরোধ করে, যা একটি মূল ফ্রন্ট-এন্ড পারফরম্যান্স কৌশল।