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**: ਖੋਜ-ਜਦੋਂ-ਤੁਸੀਂ-ਲਿਖ ਰਹੇ ਹੋ, autosave, resize-ਅੰਤ, ਯੂਜ਼ਰ ਲਿਖਣਾ ਬੰਦ ਕਰਨ ਤੋਂ ਬਾਅਦ ਵਿਧੀ — ਤੁਸੀਂ *ਅੰਤਿਮ* ਮੁੱਲ ਚਾਹੁੰਦੇ ਹੋ।
- **Throttle**: scroll ਹ্যান্ডਲਰਸ, mousemove, drag, rate-limiting — ਤੁਸੀਂ ਗਤੀਵਿਧੀ ਜਾਰੀ ਰਹਿਣ ਦੌਰਾਨ *ਅਵਧੀ* ਅਪਡੇਟਸ ਚਾਹੁੰਦੇ ਹੋ।

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਦੋਵੇਂ ਮਹਿੰਗੀ ਕਾਰਵਾਈ (API ਕਾਲ, layout ਪੁਨਰਕਲਕੁਲੇਸ਼ਨ) ਨੂੰ ਪ੍ਰਤੀ ਸਕਿੰਟ ਸੈਂਕੜਿਆਂ ਵਾਰ ਚਲਣ ਤੋਂ ਰੋਕਦੇ ਹਨ, ਜੋ ਅਗਲੇ-ਅੰਤ ਕਾਰਗਰਤਾ ਦਾ ਇੱਕ ਮੁੱਖ ਤਰੀਕਾ ਹੈ।

lodash ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ leading/trailing ਵਿਕਲਪਾਂ ਨਾਲ ਮਜ਼ਬੂਤ ਸੰਸਕਰਣ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ।