【避坑指“难”】两大场景：接口定时任务、页面跳转后清除定时任务（useRef）

“ 不懂业务的程序猿不是好攻城狮 ”

场景来了，好好审题，开发效率提高30%

做查询时，我们一般直接调search接口请求结果，现在需要隔15s请求detail详情接口，当查询状态成功时，跳转到结果详情页；反之，提示查询失败。

<Form form={formRef}>
              <Form.Item name="name">
                <Input
                  onPressEnter={onPressEnter} //
                  size="large"
                  placeholder="请输入内容进行查询"
                ></Input>
              </Form.Item>
</Form>
<Button type="primary" onClick={handleSearch} >
              查询
</Button>

const handleSearch = () => {
    formRef
      .validateFields()
      .then((values) => {
        if (!values.name) {
          message.info('请输入搜索内容');
        } else {
          onPressEnter(values)
        }
      })
      .catch((errorInfo) => {
        console.log('校验出错，请重新填写', errorInfo);
      });
 };

const onPressEnter=(values: any)=>{
    serchFunction()
}
const serchFunction=()=>{
    const obj = formRef.getFieldsValue();  //拿到表单的信息
    searchEnt({ ...obj }).then((res) => {
      const resobj = res;
      var interval = window.setInterval(() => {
        setTimeout(() => {
          queryHistoryDetail(resobj).then((res) => {

              if (res.status === 2) { //查询成功，页面跳转
                clearInterval(interval);
                history.push(`/portrait/history/detail/${res.id}`);
              } else if (res.status === 3) { //查询失败，提示错误信息
                setLoading(false);
                message.error('抱歉，未检索到相关信息');
                clearInterval(interval);
              }
          });
        });
      }, 15000);
      ref.current = interval
      return () => {
        clearInterval(interval);
      };
    });
  }

题外话：onPressEnter 输入完内容按下回车即触发查询功能。

到这里，定时任务就做完了。

从功能的角度来看，是实现了，但是不够完善，这里有个隐藏的bug是：跳转到其他的页面，定时任务还在跑的，所以需要再加一段代码来判断，如果跳转到了除查询页面以外的其他任何页面，就自动清除定时任务。

这里用到的是useRef ，返回的ref对象在组件的整个生命周期内保持不变。

 const ref = useRef<number>(0);

 useEffect(() => {
    return () => {
      const address = window.location.href.split('/').slice(-1).toString()
      if(address!=='inqury'){ 
      //判断当前页面地址的尾巴是不是inqury，这是查询页的标识，根据自己的项目不同路由请自行修改哦
        clearInterval(ref.current);
      }
    }
  }, []);