0

I'm using HTTP requests to process API in my flutter app. I implemented API for searching for a product and once a response is got it will be shown on my UI. My problem is the API that was requested will return at a different time means if I am searching 'sweets' if I entered 's' it will start an API request with searching 's', and after entering 'so' it will send another API call, But the 'SW' response may come firstly from the server before reaching 's' result. It will replace the exact result that I need to display in my app. How to prevent this issue?

Shuhaib
  • 1
  • 3

4 Answers4

2

There is a concept which is called debounce. It simply means that it can wait for a specific time for a callback to fire.

There is another concept of Callable Classes in Dart and you can use them for debounce:

import 'dart:async';

class Debounce {
  Duration delay;
  Timer? _timer;

  Debounce(
    this.delay,
  );

  call(void Function() callback) {
    _timer?.cancel();
    _timer = Timer(delay, callback);
  }

  dispose() {
    _timer?.cancel();
  }
}

Usage is simple

// 1 - Create a debounce instance
final Debounce _debounce = Debounce(Duration(milliseconds: 400));

// 2 - Use it
_debounce((){ print('First'); });
_debounce((){ print('Second'); });
_debounce((){ print('Third'); });

// ...after 400ms you'll see "Third"

For your specific example, it's important to dispose the timer, in case it makes use of your TextController after it's been disposed:

final TextEditingController _controller = TextEditingController();
final Debounce _debounce = Debounce(Duration(milliseconds: 400));

@override
void dispose() {
  _controller.dispose();
  _debounce.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
    onChanged: (String value) {
      _debounce((){
        print('Value is $value');
      });
    },
  );
}

Source

Usama Karim
  • 1,100
  • 4
  • 15
  • Thanks for your replay. This was helpful for me. But there is one more issue. I have multiple categories in my home page. If i tap on one category it will call api with that category. If tap one more it will again call with both category ID. Issue is if 1 St category selected with will call one api 2 nd category selected this will also call another. But the second one response may be get first and first one get after a delay. So my ui show secondly arrived response. How can I handle this ? – Shuhaib Jul 30 '22 at 13:14
  • You should post another question if your current issue is resolved. – Usama Karim Jul 30 '22 at 13:23
0

You can handle it by filtering your response through your input. For example, if the incoming response is for "sw" and the user has already typed just the "sw" mark it with a boolean to "true" and ignore the further responses, or else if the incoming response is for "s" but the user has typed "sw" mark its boolean to "false" and ignore it and don't let it to replace your previous data.

You can define this boolean in your object model by the way.

Iliya Mirzaei
  • 86
  • 6
0

What I understood is that you have a textfield and you are trying to call an API inside onChanged function and you want give the user some time to see results before entering new characters. You have two options:

  1. Using timer that delays the call some seconds on every call.
  2. Using TextEditingController instead of relying on onChanged. And then you call the API inside the onSubmitted function.
HKN
  • 264
  • 1
  • 8
0

You can use unique flags for every API call you make. These flags can be cached locally and check if a flag exists before making another API call.

EugeneDevv
  • 1
  • 1
  • 1