React微信小程序中离开当前页消除定时器

功能需求:由于我这边的需求是进入一个文件阅读时间超过10s后触发一个接口来增加用户的积分,但是考虑到如果10s没满用户就离开当前页发现还是会触发之前的定时器,所以这边需要我们清除定时器。

这边用到的时useRef全局定义一个定时器,在useEffect中进行创建和清除

直接上代码

import { useEffect, useState ,useRef} from 'react'

//全局定义一个定时器
  let intervalHandle =useRef()
  const getTimePoint=(fid)=>{
    //这边给全局的定时器赋值
  intervalHandle.current =  setTimeout(()=>{
     .....这边发送接口来增加用户的积分
    },10000)
  }
  //每次进入页面触发10s后发送接口的函数
   useEffect(()=>{
     getTimePoint(fid)
   },[])
//这边进行消除定时器操作
  useEffect(() => {
  return () => {
    // 清除定时器
    clearTimeout(intervalHandle.current);
};
 
  }, []);

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值