更改文本字段，调用 api - 如何限制这个？

Posted 2023-02-23

【中文标题】更改文本字段，调用 api - 如何限制这个？

【英文标题】：TextField on change, call api - how to throttle this?

【发布时间】：2019-07-12 21:37:54

【问题描述】：

如果我有一个文本字段，并且在该文本字段发生更改时，我会调用一个调用 API 的函数，我该如何限制它，所以只有在用户 1 秒内没有输入任何内容时它才会调用该函数？

我在这里迷路了。任何帮助都非常受欢迎。

【参考方案1】：

使用Timer。

如果在一秒之前按下某个键，则取消旧计时器并使用新计时器重新安排，否则进行 API 调用：

import 'dart:async';

class _MyHomePageState extends State<MyHomePage> 
  String textValue;
  Timer timeHandle;

  void textChanged(String val) 
    textValue = val;
    if (timeHandle != null) 
      timeHandle.cancel();
      
    timeHandle = Timer(Duration(seconds: 1), () 
      print("Calling now the API: $textValue");
    );
  

  @override
  void dispose() 
      super.dispose();
      timeHandle.cancel();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(20),
              alignment: Alignment.center,
              child: TextField(
                onChanged: textChanged,
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Please enter a search term')),
            ),
          ],
        ),
      ),
    );
  

【讨论】：

如果未调用 onChanged()，您忘记在 dispose() 中进行空检查。无论如何，就像魅力一样！谢谢。

【参考方案2】：

您需要使用async package 中名为CancelableOperation 的类。

您可以在有状态的小部件中声明它，在 build() 方法之外：

CancelableOperation cancelableOperation;

并在您的 onChanged 回调中像这样使用它：

cancelableOperation?.cancel();

cancelableOperation = CancelableOperation.fromFuture(Future.delayed(Duration(seconds: 1), () 
  // API call here
));

【讨论】：

请注意，使用这种方法，经过一秒后，API 调用会被多次调用。这是因为cancel 方法是异步的。