JavaScript-ში მოვლენის დამუშავების დროს throttling და debouncing ტექნიკების განსხვავება რა არის?

Throttling და debouncing არის ტექნიკები, რომლებიც გამოიყენება JavaScript-ის მოვლენების დამუშავების დროს ფუნქციების გამოძახების სიხშირის კონტროლისთვის, რათა თავიდან აიცილოს ზედმეტი გამოძახებები.

• Debouncing გადადებს ფუნქციის შესრულებას მანამ, სანამ მოვლენა გარკვეული დროის განმავლობაში აღარ განმეორდება. თუ მოვლენა კვლავ ხდება, დროის გამვლელი განულდება. ეს სასარგებლოა, მაგალითად, მომხმარებლის შეყვანის დამუშავებისას, რათა ფუნქცია ამოქმედდეს მხოლოდ მაშინ, როდესაც მომხმარებელი დასრულებს შეყვანას.

• Throttling محدودავს ფუნქციის გამოძახებას განსაზღვრულ დროის ინტერვალზე. ფუნქცია რეგულარულად გამოიძახება, მაგრამ არა მითითებულ ინტერვალზე მეტი ხნით, მიუხედავად იმისა, რომ მოვლენა უფრო ხშირად ხდება. ეს სასარგებლოა სქროლინგის ან ფანჯრის ზომის ცვლილების დროს, რათა ფუნქცია მუშაობდეს მუდმივ ინტერვალზე.

Debouncing-ის მაგალითი:

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resize მოვლენა დამუშავებულია, როდესაც მომხმარებელი შეწყვეტს ზომის ცვლილებას');
}, 300));

Throttling-ის მაგალითი:

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('სქროლის მოვლენა მაქსიმუმ ერთხელ ყოველ 200მს');
}, 200));