Sử dụng hàm debounce của lodash khi tạo Autocomplete
_.debounce
1
Autocomplete
1
White

pxhoang1992 viết ngày 12/03/2019

Mình có làm 1 task về tạo autocomplete, nó là cái khung kết quả hiển thị dưới khung search các bạn cứ nhìn chỗ search của fb là hiểu.

alt text

Tất nhiên là kết quả cần realtime nhưng nếu người dùng nhập nhiều kí tự quá mà mình request lên server liên tục mỗi khi kí tự thay đổi thì ko được hay cho lắm, vì vậy mình cần chặn đợi cho người dùng nhập xong hết thì request lên server. Thời gian delay tầm 600ms là hợp lí và mình sẽ dùng hàm debounce để làm việc này. Dự án của mình thì dùng React + Redux + Rxjs + Lodash, cả Rxjs và Lodash đều có hàm debounce nhưng mình làm thì chỉ nói cách dùng hàm debounce của thằng Lodash thôi nhé. Trong hàm onchange của ô input mình vẫn set state để hiển thị text nhập trên ô input nhưng khi dispatch action request AJAX lên server mình sẽ tách riêng ra 1 hàm và mình debounce nó lại.

alt text

Sau đó bind this hàm delay từ hàm chứa action request AJAX lên server và sử dụng hàm delay trong chỗ khác là được, mình thì dùng luôn trong hàm onChange nhé

alt text

Và kết quả ta chỉ request đến server api chứa kí tự hoàn chỉnh cuối cùng người dùng nhập, vd mình vừa nhập postace!

alt text

Bài viết đầu tiên mong được mọi người đóng góp thêm!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

pxhoang1992

2 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
1 0
Customize scrollbar Hôm nay mình có task về tạo khung customize scroll bar mình đã phải bới tung google vì ko customize được 2 cái nút tăng giảm đ...
pxhoang1992 viết 5 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!