[JAVASCRIPT] Introduction to Debounce Function

Các sự kiện input từ người dùng (thông qua mouse, keyboard,…) thường diễn ra với tần suất rất nhanh. Điều này khiến hàm xử lý sự kiện được thực thi rất nhiều rất và có thể ảnh hưởng đến performance cũng như user experience (UX), đặc biệt khi việc input tác động đến giao diện trang web. Để khắc phục điều này, ta hãy tìm hiểu và ứng dụng phương pháp “Debounce” trong javascript.

Giới Thiệu

Debounce, hiểu một cách đơn giản, là một khái niệm chỉ sự giới hạn việc thực thi một đoạn code liên tục với tần suất nhanh.

Để hiểu rõ hơn, ta hãy tìm hiểu cách hiện thực hàm debounce() của thư viện underscore.js. Đây là một phiên bản cũ của hàm debounce() trong underscore.js. Phiên bản này cũng hoạt động tương tự như phiên bản mới nhưng ngắn gọn và dễ hiểu hơn nên tôi dùng nó để minh họa.

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
     var timeout;
     return function() {
          var context = this, args = arguments;
          var later = function() {
               timeout = null;
               if (!immediate) func.apply(context, args);
          };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
     };
};

Tôi đã tạo một phiên bản rút gọn giúp bạn dễ hiểu hơn bằng cách loại bỏ bớt tham số immediate:

function debounce(func, wait) {
     var timeout;
     return function() {
          var context = this, args = arguments;
          var executeFunction = function() {
               func.apply(context, args);
          };
        clearTimeout(timeout);
        timeout = setTimeout(executeFunction, wait);
     };
};

Cách sử dụng hàm này:

// Usage
var handleClick = debounce(function (e) {
     // do stuff here
    console.log(e);
}, 500);
$("input").on("click", handleClick);

Theo cách hiện thực hàm debounce() bên trên, nếu đoạn code cần thực thi(được đại diện bởi tham số func) được gọi liên tục thì nó sẽ chỉ thực thi một lần duy nhất.

Điều này xảy ra do func được gọi sau một khoảng thời gian thông qua setTimeout(). Nếu có một lệnh thực thi func nữa xảy ra, nó sẽ hủy việc gọi func trước đó bằng clearTimeout() và tạo một setTimeout() mới cho func. Vậy nên chỉ có lệnh gọi cuối cùng được thực thi nếu sự kiện xảy ra quá nhanh. Như trong ví dụ trên, hai sự kiện click phải được gọi cách nhau một khoảng thời gian tối thiểu là 500 milisecond.

Lời Kết

Có một hàm tương tự trong underscore.js mà bạn có thể tìm hiểu để sử dụng đó là throttle(). Bạn có thể thấy sự khác biệt của hai hàm này qua demo sau: http://jsfiddle.net/amyseqmedia/dD99u/37/ hoặc có thể xem ở bên dưới 

Ngoài ra, bạn có thể tận dụng các ưu điểm của requestAnimationFrame()
thay thế cho setTimeout(), bạn thậm chí có thể không cần đến tham số wait khi sử dụng phương pháp này.