Hàm Debounce là kỹ thuật cho phép chúng ta nhóm nhiều lệnh thực thi liên tiếp và liền kề thành một lệnh thực thi.

Ứng dụng

Sử dụng để hạn chế số lần gọi API khi người dùng nhập từ khoá trong khung tìm kiếm. API chỉ gọi một lần sau khi người dùng đã dừng nhập từ khoá trong khoảng thời gian cài đặt.

Hạn chế số lần gọi một hàm tính toán khi sử dụng resize hoặc scrolling trong window.

Code

/**
 * @param {Function} func
 * @param {number} wait
 * @return {Function}
 */
export default function debounce(func, wait) {
  let timerID = null;

  return function (...args) {
    const context = this;
    clearTimeout(timerID);

    timerID = setTimeout(() => {
      timerID = null;
      func.apply(context, args);
    }, wait);
  };
}

Trong hàm Debounce, cần chú ý tới 3 khái niệm quan trọng:

1. Closure

2. this

3. setTimeout

Ở đây mình cần khai báo 1 hàm mới - debounced - có chứa hàm chính, thời gian chờ. Closure giúp mình khai báo một biến timerID để khai báo setTimeout và xoá đi khi cần thiết mà vẫn giữ được biến đó trong hàm.

Việc lưu lại this giúp hàm chính func được thực hiện với ngữ cảnh đúng của nó cùng với các arguments.

Và hàm func sẽ được thực thi ngay khi được gọi bằng func.apply()

let i = 5;

let debounced = debounce((a: number, b: number) => {
       i += a * b;
}, 1000);

$(window).on('scroll', debounced_version(3, 2)); // args -> 3,2