რა განსხვავებაა 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**: scroll ხელმძღვანელი, mousemove, drag, მაჩვენებელი-შეზღუდვა — გსურთ *პერიოდული* განახლება მოქმედების დროს.

## რატომ არის ეს მნიშვნელოვანი

ორივე ხელს უშლის ძვირი სამუშაოს გაშვებას (API ზარები, განლაგების გადაანგარიშება) ასობით ჯერ წამში, რაც ფront-end წარმადობის ღია ტექნიკაა.

ბიბლიოთეკები, როგორიცაა lodash, საიმედო ვერსიებს მოამარტივებს leading/trailing ვარიანტებით.