Debounce and throttle in javascript

Trong javascript debounce và throttle là 2 kĩ thuật giúp tối ưu performance và tăng trải nghiệm người dùng ứng dụng của bạn. Debounce và throttle giúp bạn kiểm soát được việc trigger một event khi người dùng sử dụng các event liên tục như search, click, resize, scroll...

Debounce

Debounce là kĩ thuật giúp trì hoãn trigger một event trong một khoảng thời gian nhất định, kể từ lần cuối event xảy ra.

VD: Khi người dùng sử dụng tính năng search bạn muốn chỉ khi người dùng người ngừng gõ từ khoá muốn search trong vòng 1s mới gọi api search thì dùng debounce 1s.

Trong thực tế debounce giống như khi ta đi thang máy, trung bình thang máy sẽ chờ 5s để đóng cửa lại sau đó di chuyển, nhưng nếu có 1 người mới đến mở của thang máy, thang máy sẽ đợi thêm 5s nữa, cứ thể cho đến khi không còn người nào mở cửa thang máy, thì thang máy mới đóng cửa và di chuyển.

Debounce javascript example

Viết một đoạn code demo cho debounce trong javascript

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

const debounceSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
  // Make API call with the search query
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debounceSearch(event.target.value);
});

Ngoài ra cũng có thể dùng debounce sử dụng thư viện lodash

Throttle

Throttle cũng là kĩ thuật giúp trì hoãn trigger một event trong một khoảng thời gian nhất định nhưng khác với debounce, throttle sẽ trigger event luôn khi hết thời gian đợi, nó không reset lại thời gian đợi khi người dùng vẫn thực hiện tiếp event

VD: Khi người dùng sử dụng tính năng scroll bạn muốn cứ sau 1s lại xử lý gọi hàm xử lý thì dùng throttle, không dùng debounce trong trường hợp này vì người dùng scroll liên tục nên rất lâu thì event mới được trigger

Trong thực tế throttle giống như khi ta đi tàu điện ngầm, cứ 15 phút cửa tàu lại mở ra và đóng lại để di chuyển luôn, nếu vẫn còn người muốn đi tàu cũng không mở cửa nữa.

Throttling example

Viết một đoạn code demo cho throttle trong javascript

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}

const throttledScrollHandler = throttle(() => {
  console.log("Loading more content...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);

Tổng kết

Debounce và throttle dùng để delay trigger event trong 1 thời gian, debounce có thể kéo dài thời gian delay còn throttle thì không. Tuỳ từng trường hợp mà xử dụng debounce hoặc throttle.

Tham khảo bài viết:
https://kettanaito.com/blog/debounce-vs-throttle
https://anonystick.com/blog-developer/debounce-vs-throttle-javascript-202005261421546