Flutter中Periodic Timer取消失效问题求助

核心问题 #

你代码里的错误有两个关键：

1. 错误地在setState回调内部定义dispose方法——dispose是Flutter State组件的生命周期方法，必须放在State类的顶层，嵌套在setState里根本不会被执行，自然无法取消Timer。
2. 检测到EXIT后没有主动立即取消Timer，且导航后原页面的Timer仍在后台运行，导致持续轮询触发页面跳转。

修正后的完整代码 #

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  Timer? timer3;
  bool exit = false;
  bool entry = false;
  String location = '';

  @override
  void initState() {
    super.initState();
    // 初始化周期Timer
    timer3 = Timer.periodic(Duration(seconds: 5), (Timer t) => function());
  }

  // 正确放置dispose方法：与initState、build同级
  @override
  void dispose() {
    // 组件销毁时确保取消Timer
    timer3?.cancel();
    super.dispose();
  }

  Future<dynamic> function() async {
    var url = "https://rtdjiigwvh.execute-api.us-east-2.amazonaws.com/v1/preview_checkout";
    Map data = {};
    String body = json.encode(data);
    
    try {
      var response = await http.post(
        url,
        headers: {"Content-Type": "application/json"},
        body: body,
      );
      location = json.decode(response.body)["Location"].toString();
      print(location);

      if (location == 'ENTRY') {
        setState(() {
          entry = true;
        });
      } else if (location == 'EXIT') {
        // 第一步：立即取消Timer，终止轮询
        timer3?.cancel();
        // 第二步：更新状态
        setState(() {
          exit = true;
        });
        // 第三步：跳转到目标页面
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => NextScreen()),
        );
      }
    } catch (e) {
      // 捕获请求异常，避免崩溃
      print('请求失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    // 你的页面UI代码
    return Scaffold(
      // ...
    );
  }
}

关键修复点说明 #

• 正确放置dispose方法：将dispose移到State类顶层，确保组件销毁时自动取消Timer，作为兜底逻辑。
• 主动取消Timer：在检测到EXIT后第一时间调用timer3?.cancel()，直接终止轮询，避免后续重复执行请求和跳转。
• 优化异步逻辑：去掉then链式调用，改用async/await+try/catch，代码更清晰且能处理请求异常。

内容的提问来源于stack exchange，提问作者yamini r