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, drag, दर-सीमित गर्ने — तपाइँ कार्य चलिरहेको बीचमा *आवधिक* अद्यावधिकहरू चाहनुहुन्छ।

## यो किन महत्त्वपूर्ण छ

दुबै महँगो काम (API कलहरू, लेआउट पुनर्गणना) प्रति सेकन्ड सयौं पटक चलाउने कुरा रोकदछन्, जो एक मुख्य front-end प्रदर्शन प्रविधि हो।

lodash जस्ता पुस्तकालयहरूले leading/trailing विकल्पहरू सहित मजबूत संस्करणहरू प्रदान गर्छन्।