Delay search when type textformfiled use CancelableOperation in Flutter

Đôi khi chúng ta làm các chức năng tìm kiếm không phải lúc nào chúng ta cũng gọi dữ liệu ngay lập tức. Nếu như thông thường trong hàm onChanged của Flutter bạn sẽ gọi API mỗi khi người dùng gõ ngay lập tức. Hành động gọi API liên tục như vậy làm cho server nhận một lượng yêu cầu quá lớn, ở client cũng phải gọi liên tục làm cho máy xử lý liên tục. Nó sẽ ảnh hưởng tới hiệu suất hoặc API đang được gọi không đúng từ khóa mà ta tìm kiếm. Giải pháp là ta nên tạo độ trễ nhất định khi người dùng nhập, khi biết người dùng hoàn thành một từ khóa đầy đủ và lúc này chúng ta mới nên gọi API.

Với ứng dụng mobile sử dụng Flutter ta có thể sử dụng plugin: https://pub.dev/packages/async

Đây là plugin chuyên xử lý bất đồng bộ trong Flutter rất hay.

Ta sử dụng CancelableOperation để cancel (hủy bỏ) Future trước đó.

Trong hàm onChanged ta sẽ hủy Future và bắt đầu một cancellableOperation mới.

Full example: