JavaScript - Debounce function là gì?

#1

Lúc trước mình có làm một bài test yêu cầu làm một Instant Search như của Twitter. Trong quá trình làm, sẽ phát sinh một trường hợp như trong hình dưới đây.

http://vhnam.github.io/blog/javascript-debounce-function-la-gi/images/example.png

Tức là, mình gởi 3 request, thì sẽ có 3 response tương ứng. Nhưng mình chỉ muốn gởi request thứ 3 với từ khóa “abc” nhưng response trả về lại là dữ liệu của từ khóa “ab”. Như vậy kết quả search của người dùng sẽ bị sai, ảnh hưởng nghiêm trọng tới UX. :scream:

Mình được giới thiệu kỹ thuật Debounce để giải quyết vấn đề này, sẵn tiện viết thành blog để chia sẻ luôn :wink:

Mình có viết chưa đúng chỗ nào, mong mọi người chỉ chỗ để sửa.

http://vhnam.github.io/blog/javascript-debounce-function-la-gi/

5 Likes
#2

Trình bày khó hiểu hơn bài throttle :smile:

Không gửi Pull request được nhỉ, Đạt đọc tới đoạn này thấy cái indentation bị lỗi, ngứa tay sửa lại.

https://gist.github.com/trandatnh/7f04e13d1cfe33a039ca#file-debounce-step-3-js

Còn mấy chỗ bị lỗi indent nữa đó :smiley:

1 Like
#3

Cái Gist nó bị lỗi indent liên tục nên em lười sửa nữa :grinning:

Em sẽ rút kinh nghiệm, mai mốt viết kiểu bottom-up (cách sử dung rồi mới tới cách implement). Thực ra, debounce anh tưởng tượng là thế này. Mỗi lần gởi request là anh có 500ms để delay. Nếu trong thời gian delay của request thứ nhất, có một request thứ hai gởi tiếp thì sẽ ignore request thứ hai.

Để em cập nhật lại một phiên bản khác cho dễ hiểu hơn :wink:

1 Like
#4

À, anh hiểu cái debounce, nhưng mà cách trình bày của bài này không rõ bằng bài throttle.

Ủa hình như anh hiểu nhầm?

Anh hiểu là nó ignore request thứ nhất chứ nhỉ?

Trong đoạn code này thì mình clearTimeout(timeout) cho cái request trước rồi set lại timeout cho request mới.


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);
  };
};
2 Likes
#5

à, em viết sai… ignore cái request thứ nhất đó anh :smiley:

1 Like
#6

Chào mọi người, mình mới cập nhật thêm demo để mọi người dễ hình dung hơn.

// anh @ltd thấy demo thế nào?

2 Likes
#7

Chà công phu quá. Em làm thế này thì mai mốt cáoi blog thành cái CV online rồi :slight_smile:

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?